zoukankan      html  css  js  c++  java
  • 另一种方法创建EasyUI中的PropertyGrid

     现在有需求新建一个EasyUI中的PropertyGrid控件,在网上找了半天,都是用json传值的,官网上的例子如下:

     $('#tt').propertygrid({
    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({

            298,
            height: 'auto',
            showGroup: true,
            scrollbarSize: 0,
            columns: [[
                    { field: 'name', title: 'Name', 100, resizable: true },
                    { field: 'value', title: 'Value', 100, resizable: false }
            ]]
        });

        $('#edit').propertygrid('loadData', rows);


    效果图:





  • 相关阅读:
    jq中$(function(){})与原生window.onload的区别
    利用window.parent调用Iframe父页面变量、方法的爬坑之路
    前端跨域3种基本解决方案
    MySQL按日期分组统计(按天统计,按月统计)
    go读取文件内容写入另一文件中
    C++中函数返回值是一个对象时的问题
    docker构建dpdk运行环境镜像
    NFS服务安装
    tesseract-4.0.0源码编译安装
    linux系统设置cpu孤立
  • 原文地址:https://www.cnblogs.com/QiuJL/p/4524213.html
Copyright © 2011-2022 走看看