另一种方法创建EasyUI中的PropertyGrid
现在有需求新建一个EasyUI中的PropertyGrid控件,在网上找了半天,都是用json传值的,官网上的例子如下:
$('#tt').propertygrid({
width:300,
height:'auto',
url:'propertygrid_data.json',
showGroup:true,
scrollbarSize:0
});
这样需要新建一个json文件,于是我就想有没有什么办法直接用一个js文件就可以完成以上操作呢,试了很久,发现办法还是有的,现贴出来供有需求的朋友参考,如果有更好的方法欢迎在留言中贴出来,以便大家互相学习。
var rows = [
{ "name": "姓名", "group": "帐号", "value": "", "editor": "text" },
{ "name": "帐号", "group": "帐号", "value": "", "field": "id", "editor": "text" },
{ "name": "职位", "value": "", "group": "其它", "field": "Role", "editor": { "type": 'combobox', "options": { "valueField": 'value', "textField": 'name', "url": '../../home/GetSelectItems_Role', "required": true}} },
{ "name": "办公电话", "value": "", "group": "其它", "field": "officePhone", "editor": "text" },
{ "name": "移动电话", "group": "其它", "value": "", "field": "mobilePhone", "editor": { "type": 'validatebox', "options": { "required": true}} },
{ "name": "集团短号", "group": "其它", "editor": "text", "value": "", "field": "mobilePhoneShort" },
{ "name": "第二联系方式", "group": "其它", "value": "", "field": "phoneSecond", "editor": { "type": 'validatebox', "options": { "required": true}} },
{ "name": "备注", "group": "其它", "editor": "text", "value": "", "field": "remark" }
];
$('#edit').propertygrid({
height: 'auto',
showGroup: true,
scrollbarSize: 0,
columns: [[
{ field: 'name', title: 'Name', width: 100, resizable: true },
{ field: 'value', title: 'Value', width: 100, resizable: false }
]]
});
$('#edit').propertygrid('loadData', rows);
效果图: