EasyUI中DataGrid动态参数的实现

在datagrid的表头列特别多的情况下,不可能一个个的手写,这时就需要使用动态创建的方式,把表头列创建出来。

  • 下面是datagrid中columns的格式

    columns:[[
        {field:'id',title:'组织机构编号',width:'7%'},
        {field:'name',title:'组织机构名称',width:'15%'},
        {field:'computer',title:'计算机设备类',width:'7%',
            styler: function(value,row,index){
                return 'background-color:#ffee00;color:red;';
        }},
        {field:'SG_AUT_SERVER_B',title:'服务器',width:'7%'}
    ]]
  • 下面例子是treegrid,和datagrid是一样的。
    采用 $("#treegrid1").treegrid(options)方法,生成表格。

    var options ={};
    options.url = "<%=basePath %>back/intequery/getDevModelList";
    options.rownumbers = true;
    //options.pagination = true;
    options.singleSelect = true;
    //options.pageList = [10];
    //options.striped = true;
    options.fit = true;
    options.loadMsg = "正在加载,请稍候……";
    options.idField = "ID";
    options.treeField = "NAME";
    var tableName = $('#devtab').tabs('getSelected').panel('options').id;
    options.queryParams = {tableName:tableName.substring(0,ableName.lastIndexOf("_B"))};
    var array2 = [];
    array2.push(array1); //组装动态参数,array1可以是后台返回的JSONArray
    options.columns = array2;
    $("#treegrid1").treegrid(options);

注意:columns是数组对象,不能采用拼接字符串的方式构造!

  • 应采用下面方式进行构造

    var array3 = [];
    array3[0] = new Object(); 
    array3[0].field = "NAME";
    array3[0].title = "设备型号";
    array3[0].align = "left";
    array3[0].width = "400";
    var array4 = [];
    array4.push(array3);

你可能感兴趣的:(javascript,easyui,datagrid)