easyUi的组合表格
公司之前的项目是用easyui写的里面还混搭着php...把分支下来，有点蒙。晚上回来恶补一下吧，今天渲染这个表格，我开始自己写假数据，然后用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": "万邑联",
"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 style="margin:20px 0"></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>
