Django学习12--数据表格展⽰
信息管理系统的主要⼯作是信息，即数据的存储；其次是对存储数据的分析和展⽰。
数据的存储通过数据库完成，形成结构化的数据结构，⽅便数据的整理；
django怎么学数据的分析通过数据库操作，将数据经过清洗、转换，⽣成所需的数据集合；然后加载到所需的界⾯进⾏展⽰。
数据的展⽰可以分为三类：⽂字、表格、图形
数据的表格展⽰
1. HTML table
使⽤HTML格式中<table>标签，定义表格名称、表格头、表格体
* 需要解决的问题：表格形式简单（⽤户感受低）、表格头和列锁定（易⽤性差）
<table class="table">#}
<caption >
Show Table
</caption>
<tr>
// show table head
<th bgcolor="#669900" > table head1 </th>
<th bgcolor="#669900" > table head2 </th>
<th bgcolor="#669900" > 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>
// 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>
<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 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) { ws; },#}
{# page: function(obj) { return results.page; },#}
{# total: function(obj) { al; },#}
{# records: function(obj) { ds; }#}
{# }#}
{# 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 }}',
"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="-");
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论