另一种方法创建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({

        width: 298,
        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);


效果图:





posted @ 2012-08-15 12:47  风一样的大叔  阅读(748)  评论(0编辑  收藏  举报