easyUi的组合表格
公司之前的项⽬是⽤easyui写的⾥⾯还混搭着把分⽀下来，有点蒙。晚上回来恶补⼀下吧，今天渲染这个表格，我开始⾃⼰写假数据，然后⽤ajax操作再使⽤ obj.datagrid('loadData', msg); 其实msg是我处理后的数据，但是⽼⼤⼀看马上说，我这不⾏，⽆奈⼜得去看问题，最终发现这个json数据的不⼀样，他是有⾃⼰的key值得。
数据： total的值就是columns的长度，columns 是个数组，row 则代表⾏每⾏的数据，我被这个数据坑了很久。
{
"total": 9,
"rows": [
{
"msg_title": "系统消息",
"msg_status": "已推送",
"msg_classified": "产品变更",
"msg_lang": "简体中⽂",
"user_name": "sheng",
"msg_position": "万⾢联",
"msg_receive": "全部客户",
"msg_time": "2010-2-1",
"msg_operation": "删除"
},
{
"msg_title": "系统消息",
"msg_status": "已推送",
"msg_classified": "产品变更",
"msg_lang": "简体中⽂",
"user_name": "shenghui",
"msg_position": "万⾢联",
easyuidatagrid"msg_receive": "全部客户",
"msg_time": "2010-2-1",
"msg_operation": "删除"
},
{
"msg_title": "系统消息",
"msg_status": "已推送",
"msg_classified": "产品变更",
"msg_lang": "简体中⽂",
"user_name": "shenghui",
"msg_position": "万⾢联",
"msg_receive": "全部客户",
"msg_time": "2010-2-1",
"msg_operation": "删除"
}
]
}
下⾯是html和js
<!DOCTYPE html>
<html>
<hemsg>
<meta charset="UTF-8">
<title>Multiple ComboGrid</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</hemsg>
<body>
<h2>Multiple ComboGrid</h2>
<p>Click the right arrow button to show the DataGrid and select items.</p>
<div ></div>
<div data-options="region:'center',border:false">
<table id="tableList"></table>
</div>
<input type="text" name="name" value="">
<script type="text/javascript">
$(function(){
$('#tableList').datagrid({
panelWidth: 1000,//⽹格的宽度
multiple: true, //下拉框可以选择多个值，可省
idField: 'itemid',//id的字段名，可省
textField: 'productname', // 显⽰在⽂本框中的 text 字段名，可省
url: 'msg.json',//数据地址
method: 'get', //post 或者get都可以看需求
fitColumns: true,//⾃动扩展或收缩列的⼤⼩以适应⽹格宽度和防⽌⽔平滚动条
columns: [[  // 表头->Column 是⼀个数组对象，数组元素的元素是⼀个配置对象，它定义了每个列的字段
{title:'',field:'ck',checkbox:true},//单选框
//title->该列标题⽂本。 field->该列对应的字段名称，相当于数据
{title:'标题',field:'msg_title',width:80,align:'left',sortable:true},//sortable 排序                    {title:'状态',field:'msg_status',width:60,align:'center'},
{title:'分类',field:'msg_classified',width:80,align:'left',sortable:true},
{title:'语⾔版本',field:'msg_lang',width:50,align:'center',sortable:true,},
{title:'创建者',field:'user_name',width:60,align:'center'},
{title:'推送平台',field:'msg_position',width:60,align:'center'},
{title:'接收⼈',field:'msg_receive',width:80,align:'center',sortable:true,},
{title:'推送时间',field:'msg_time',width:80,align:'center',sortable:true,},
{title:'操作',field:'msg_operation',width:60,align:'center', }
]],
});
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。