easyui datagrid js赋值（自定义json）+table中使用字典表

ゝ一世哀愁。 2022-02-05 07:11 365阅读 0赞

在官方文档中给的赋值方式是：

data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">

通过制定url来赋值给table。但是大多数情况下table的值是从后台通过各种条件获得的。这种方式个人感觉用处不大。

还有一种方式：

$('#dg').datagrid({
        url:'datagrid_data.json',
        columns:[[
    		{field:'code',title:'Code',width:100},
    		{field:'name',title:'Name',width:100},
    		{field:'price',title:'Price',width:100,align:'right'}
        ]]
    });

个人感觉这种方式也是动态赋值的，于是自己研究了一下动态赋值方式：

这是html
        <table id="shTable" class="easyui-datagrid" title="孵化场地费待审核列表" style="width:98%;height:250px;align:center;border:1px solid red;"
        					data-options="singleSelect:true,collapsible:true,method:'get'">
     				<thead>
     					<tr>
     						<th data-options="field:'tyshxym',width:180,align:'center'">统一社会信用码</th>
     						<th data-options="field:'dwmc',width:300,align:'center'">公司名称</th>
     						<th data-options="field:'sqrq',width:160,align:'center'">申请日期</th>
     						<th data-options="field:'jdmc',width:300,align:'center'">孵化基地名称</th>
     					</tr>
     				</thead>
     			</table>

--------------------

这是js
    var list = [];
    for(var i = 0; i < data.result.length; i++) {
    	var arr = {};
    	arr.tyshxym = data.result[i].tyshxym;
    	arr.dwmc = data.result[i].dwmc;
    	arr.sqrq = data.result[i].sqrq;
    	arr.jdmc = data.result[i].jdmc;
    	list.push(arr);
    }
    
    $('#shTable').datagrid({
    	data:list
    });

可以看出我的数据是从后台获取到，然后在js封装成自己想要的json格式。然后赋值给table。希望能对你们有所启发。

--------------------

注意：当后台传过来的是list封装的对象时，可以直接赋值！！！

$('#cxTable').datagrid({
    	data:data.result
    });

--------------------

经过实践，如果还要在table中使用字典表，上面的方式就不行了。下面贴出后来研究的代码：

html代码
    	
    <table id="shTable" class="easyui-datagrid" title="孵化场地费退款列表(双击操作)" style="width:98%;height:250px;align:center;border:1px solid red;"
    					data-options="singleSelect:true,collapsible:true,method:'get'">
    </table>

--------------------

js代码
    
    $('#shTable').datagrid({            //定位到Table标签，Table标签的ID是cxTable
        data:data.result, 			    //Json格式的数据
        striped: true,                  //斑马线效果
        pagination: true,               //分页工具栏
        columns: [[
            { field:'tyshxym',width:230,align:'center',title:'统一社会信用码'},
            { field:'dwmc',width:330,align:'center',title:'公司名称'},
            { field:'btje',width:140,align:'center',title:'补贴金额'},
            { field:'sqrqStr',width:200,align:'center',title:'申请日期'},
            { field:'tkbz',width:160,align:'center',title:'退款情况',
                formatter:function(value,row){
                    for(var item in tkbz){
                        if(value == tkbz[item].id)
                            return tkbz[item].text;
                        else continue;
                    }
    
                }
            }
        ]]
    });

--------------------

上面的tkbz是：

var tkbz = [
        {"id":null,"text":"未退款"},
        {"id":"","text":"未退款"},
        {"id":"0","text":"已申请退款"},
        {"id":"1","text":"在退款中"},
    ];