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

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

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":"在退款中"},
];
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值