Django学习12 -- 数据表格展示
Django学习12 -- 数据表格展示
·
信息管理系统的主要工作是信息，即数据的存储；其次是对存储数据的分析和展示。
- 数据的存储通过数据库完成，形成结构化的数据结构，方便数据的整理；
- 数据的分析通过数据库操作，将数据经过清洗、转换，生成所需的数据集合；然后加载到所需的界面进行展示。
- 数据的展示可以分为三类：文字、表格、图形
数据的表格展示
参考：12款 JavaScript 表格控件(DataGrid) https://www.cnblogs.com/i7758/p/7160509.html
1. HTML table
使用HTML格式中<table>标签，定义表格名称、表格头、表格体
* 需要解决的问题：表格形式简单（用户感受低）、表格头和列锁定（易用性差）
<table style="white-space:nowrap;width:100%; font-size:10px; border:solid; border-width:0px;" class="table">#}
<caption style="font-size:15px;font-weight:bold;color:#ffff66;background-color:#668899;">
Show Table
</caption>
<tr>
// show table head
<th bgcolor="#669900" style="color:white"> table head1 </th>
<th bgcolor="#669900" style="color:white"> table head2 </th>
<th bgcolor="#669900" style="color:white"> table head3 </th>
......
</tr>
<tr>
// show table data list
{% for dr in data_request %} //get data list from django view
//show table data
<td align="left" valign="middle" bgcolor="#F5F5F5">{{dr.table_data1}}</td>
<td align="left" valign="middle" bgcolor="#F5F5F5">{{dr.table_data2}}</td>
<td align="left" valign="middle" bgcolor="#F5F5F5">{{dr.table_data3}}</td>
......
</tr>
{% endfor %}
</table> 2. JSgrid
参考：http://js-grid.com/
// JS引入及CSS样式使用
<script type="text/javascript" src="{% static "js/jquery-3.4.1.js" %}"></script>
<link type="text/css" rel="stylesheet" href="{% static "css/jsgrid.min.css" %}" />
<link type="text/css" rel="stylesheet" href="{% static "css/jsgrid-theme.min.css" %}" />
<script type="text/javascript" src="{% static "js/jsgrid.min.js" %}"></script>
// JS脚本引入JSgrid
<script>
// 定义表格数据格式：table_head, table_data
var table_data = [
{% for dr in data_request %} //get data list from django view
{
"head_name1" : '{{ dr.table_data1 }}',
"head_name2" : '{{ dr.table_data2 }}',
"head_name3" : '{{ dr.table_data3 }}',
......
{% endfor %}
];
// JSgride设置
$("#jsGrid").jsGrid({
// 样式设置
width: "100%",
height:"100%",
size: "8px",
{# inserting: true,#}
{# editing: true,#}
sorting: true,
paging: true,
data: projects,
headrowrender: [],
// 数据格式设置
fields: [
{ name : "table_data1",width:40},
{ name : "table_data2",width:50},
{ name : "table_data3",width:120 },
......
{# { type : "control" }#}
]
});
</script> 3. JQgrid
参考：http://www.trirand.com/blog/
http://www.trirand.com/blog/jqgrid/jqgrid.html
https://blog.mn886.net/jqGrid/
<style>
.ui-jqgrid .ui-jqgrid-title{font-size:16px;} /*修改grid标题的字体大小*/
.ui-jqgrid-sortable {font-size:10px;} /*修改列名的字体大小*/
.ui-jqgrid tr.jqgrow td {font-size:10px; } /*修改表格内容字体*/
</style>
// JS引入及CSS样式使用
<script type="text/javascript" src="{% static "js/jquery-3.4.1.js"%}"> </script>
<link type="text/css" rel="stylesheet" href="{% static "css/ui.jqgrid.css" %}" />
<link type="text/css" rel="stylesheet" href="{% static "css/jquery-ui.theme.css" %}" }
<link type="text/css" rel="stylesheet" href="{% static "css/jquery-ui.theme.min.css" %}" />
<script type="text/javascript" src="{% static "js/jquery.jqGrid.min.js"%}"></script>
<script type="text/javascript" src="{% static "js/jquery.jqGrid.src.js"%}"></script>
<table id=data_table style="white-space:nowrap; width:100%; font-size:10px; border:solid; border-width:0px;" class="table">
</table>
<script>
//官方文档提供的方法，使用固定列后性能下降迅速，原因不明？
{# $(function(){#}
{# pageInit1();#}
{# });#}
// 表格行、单元格、列进行渲染
function viewCellAttr(rowId, val, rawObject, cm, rdata) {
rowId = rowId - 1;
t1 = $(this).getCell(rowId,"table_column_data_name");
//val, 存储使用当前函数的单元格的值，多个单元格使用时按顺序存储
return $('#'+ rowId).find("td").css("background-color", "#FFD700");
{# function pageInit1()#}
{
var grid = $("#data_table").jqGrid(
{
{# url:'real_data_url',#}
{# datatype:"json",#}
datatype:"local",
{# altRows: true,#}
height : '100%',
width: '100%',
// 设置显示列
colNames: ["head1","head2","head3",......],
// 设置列格式
colModel: [
{name: 'name1',index: 'index1',width: '100%', align: 'left', frozen : true}, // frozen 列冻结
{name: 'name2',index: 'index2',width: '100%', align: 'left',cellattr: viewCellAttr},
{name: 'name3',index: 'index3',width: '100%', align: 'left'},
......
],
// 设置表格显示格式
// 分页显示
{# rowNum:20,#}
{# rowList:[10,20,30],#}
{# pager: "indivdual_html_element",#}
{# loadonce : true,#}
width:1599,
sortname: '',
gridview: true,
viewrecords: true,
{# scroll:true,#} // 影响表头是否可以锁定
{# jsonReader: {#} // Json方法读取数据，待尝试
{# root: "rows",#}
{# page: "page",#}
{# total: "total",#}
{# records: "records",#}
{# repeatitems: false#}
{# },#}
shrinkToFit: false,
caption : "Table caption",
rownumbers: true,
{# width: 'auto',#}
height: 400,
});
// Json, not complete
{# var reader = {#}
{# root: function(obj) { return results.rows; },#}
{# page: function(obj) { return results.page; },#}
{# total: function(obj) { return results.total; },#}
{# records: function(obj) { return results.records; }#}
{# }#}
{# grid.setGridParam({data: {{ pro_per }}.rows, localReader: reader}).trigger('reloadGrid');#}
// get table data
var mydata = [
{% for dr in table_data %} // get data from veiw
{
"head1": '{{ dr.table_data1 }}',
"head2": '{{ dr.table_data1 }}',
"head3": '{{ dr.table_data1 }}',
......
{% endfor %}
];
// get and show
for ( var i = 0; i <= mydata.length; i++){
jQuery("#data_table").jqGrid('addRowData', i + 1, mydata[i]);
}
// fix column that set frozen
jQuery("#data_table").jqGrid('setFrozenColumns');
}
</script>4. JQgrid 问题记录
- 多行文本在前台页面无法显示，且回车/换行格式无法显示
原因分析：html页面无法解析 \r，\n，<，>字符，需要替换为html可以识别的<br> 或 <p>操作
解决方法：
1）多行文本在前台页面无法展示
分解raw生成后的RawQuerySet，使用list将对应自段按dict格式进行分解存储，render到前台
* view页面，raw方法生成RawQuerySet，解析成数据list：list名.append({"字段显示值" : 字段值)
* template前台页面，list名.字段显示值，显示数据到前台
2）回车/换行格式无法显示
文本中的 \r，\n，<，>字符替换为html识别的<br> 或 <p>
* view页面list数据改造：字段值.replace("\r\n",'<br>') -- 此时将\r, \n用<br>替换存储
* template前台页面data数据：字段值.replace(/</g, '<').replace(/>/g, '>' ) -- 由于前台\r \n显示为< >再次进行换 - 表格最后一行(total行)颜色设置，更改指定单元格数据值
解决方法：jqgrid的gridComplete事件中处理//style中设置CSS样式 .SelectBG{ background-color:#eeeeee; } gridComplete: function () { var ids = $("#jqgrid实例名").getDataIDs(); //jqgrid实例查找到对应的 tr, td，并按CSS样式渲染 ($('#jqgrid实例名').find("tr[id='" + ids.length + "']").find("td")).addClass("SelectBG"); //jqgrid实例查找到对应的 tr, td，更改单元格内容 ($('#jqgrid实例名').find("tr[id='"+ ids[数据列行号] +"']").find("td")[数据行列号].innerHTML="-"); }
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)