文档章节

让jquery easyui datagrid列支持绑定嵌套对象

JavaSwing
 JavaSwing
发布于 2016/11/29 11:09
字数 1091
阅读 17
收藏 0

嵌套对象是指返回的json数据,是对象的某个属性自带有属性。而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的。比如:datagrid的field属性只能为field:'itemid'。这样的样式。而在项目中我们往往在项目中使用了外键对象这样的json数据,比如

//嵌套对象的json数据
var person = {"name":"张三","role":{"ID":15,"name":"管理员"}};
//datagrid默认支持的是下面这样的json数据类型
var person = {"name":"张三","role":“管理员”};

解决的办法有两种:

在看解决办法前,让我们先看看为什么datagrid这个插件为什么不支持对象的嵌套。

javascript为我们提供了两种获取一个对象属性的方法:点操作符和“[]”以数组的方式得到数据。但不支持这两种方式的结合。

var person = {"name":"张三","role":{"ID":15,"type":"管理员"}};
       alert(person.role.type);    //管理员
        alert(person['role']['type']);  //管理员
        alert(person['role.type']); //不支持

但是如果我们用正则把‘role.type’变成role][type]这样就和第二种方式一样了,就可以支持对象的嵌套了。

var str = 'role.type';
        var test = eval("person['"+str.replace(/\./g,"']['")+"']");
        alert(test);

运行下试试看吧这样就支持了。

提示下:我的jquery easyui是1.3.4版本的。

第一种方法:修改jquery.easyui.min.js这个源文件。

大概在8881这行,进行如下的修改也就是renderRow 这个方法前后。

if(col){

//在这里进行了修改源:var _671=_66e[_670];

var _671=eval("_66e['"+_670.replace(/\./g,"']['")+"']");

var css=col.styler?(col.styler(_671,_66e,_66d)||""):"";

var _672="";

var _673="";

接下来进行测试:

我这里是修改了官方demo的json数据文件,如下:

{"total":28,"rows":[
    {"productid":{"name":"张三"},"productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
    {"productid":{"name":15},"productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
    {"productid":{"name":"张三"},"productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
    {"productid":{"name":"李白"},"productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
    {"productid":{"name":"张三"},"productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
    {"productid":{"name":"张三"},"productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
    {"productid":{"name":"张三"},"productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"}
    
]}

测试的HTML文件如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Column Group - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Column Group</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>The header cells can be merged. Useful to group columns under a category.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <table class="easyui-datagrid" title="Column Group" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80" rowspan="2">Item ID</th>
                <th data-options="field:'productid.name',width:100" rowspan="2">Product</th>
                <th colspan="4">Item Details</th>
            </tr>
            <tr>
                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:240">Attribute</th>
                <th data-options="field:'status',width:60,align:'center'">Status</th>
            </tr>
        </thead>
    </table>

</body>
</html>

注:我在第二列调用的是productid.name这个属性。

火狐下效果如下:

image

第二种方法:使用js扩展

在网上找到扩展datagrid的扩展文件。

/**
 * 扩展方法 使datagrid的列中能显示row中的对象里的属性
 * 无需调用自动执行 Field:Staff.JoinDate
 **/
$.fn.datagrid.defaults.view = $.extend({}, $.fn.datagrid.defaults.view, {
    renderRow: function (target, fields, frozen, rowIndex, rowData) {
        var opts = $.data(target, 'datagrid').options;
        var cc = [];
        if (frozen && opts.rownumbers) {
            var rownumber = rowIndex + 1;
            if (opts.pagination) {
                rownumber += (opts.pageNumber - 1) * opts.pageSize;
            }
            cc.push('<td class="datagrid-td-rownumber"><div class="datagrid-cell-rownumber">' + rownumber + '</div></td>');
        }
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            var col = $(target).datagrid('getColumnOption', field);
            var fieldSp = field.split(".");
            var dta = rowData[fieldSp[0]];
            for (var j = 1; j < fieldSp.length; j++) {
                dta = dta[fieldSp[j]];
            }
            if (col) {
                // get the cell style attribute
                var styleValue = col.styler ? (col.styler(dta, rowData, rowIndex) || '') : '';
                var style = col.hidden ? 'style="display:none;' + styleValue + '"' : (styleValue ? 'style="' + styleValue + '"' : '');

                cc.push('<td field="' + field + '" ' + style + '>');

                var style = 'width:' + (col.boxWidth) + 'px;';
                style += 'text-align:' + (col.align || 'left') + ';';
                style += opts.nowrap == false ? 'white-space:normal;' : '';

                cc.push('<div style="' + style + '" ');
                if (col.checkbox) {
                    cc.push('class="datagrid-cell-check ');
                } else {
                    cc.push('class="datagrid-cell ');
                }
                cc.push('">');

                if (col.checkbox) {
                    cc.push('<input type="checkbox"/>');
                } else if (col.formatter) {
                    cc.push(col.formatter(dta, rowData, rowIndex));
                } else {
                    cc.push(dta);
                }

                cc.push('</div>');
                cc.push('</td>');
            }
        }
        return cc.join('');
    }
});

在使用嵌套对象的datagrid页面中加载这个js文件:

<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../easyui/extendDataGrid.js"></script>

运行的效果也和第一种方法的一样。

本文转载自:http://www.cnblogs.com/zxdBlog/p/3584586.html

上一篇: C#关机小程序
下一篇: VS2010调试小技巧
JavaSwing
粉丝 21
博文 44
码字总数 8095
作品 0
杭州
程序员
私信 提问
jQuery EasyUI DataGrid Checkbox 数据设定与取值

有关 jQuery EasyUI DataGrid 的相关资料,可以前往官网查看, jQuery EasyUI 官网 jQuery EasyUI Documentation DataGrid Demo CheckBox select on DataGrid...

Amamatthew
2014/10/10
235
0
qury-easyui DataGrid 整合struts2增删查该入门实例(三)

主界面 添加 修改 删除 查询暂时按照单字段id查询 页面主要代码easyDemo1.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte......

一念三千
2012/11/01
2.3K
0
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
211
0
jQuery Easyui datagrid对可编辑列的级联操作 ..

jQuery Easyui datagrid对可编辑列的级联操作 .. 编辑行的级联操作,关键点是要获取到到当前编辑行需要级联的列的Editor对象。 获取级联列Editor对象的步骤: 获取当前编辑行(基本上就是grid当...

夏悸
2012/11/07
1K
0
对于 jquery easyui 的一些问题

最近对 jquery easyui 感兴趣,于是在官网上面学习学习,大量的API,用起来很不错,但是也带来一些问题。 1:linkbutton 的 disabled 属性和 disable 方法,无法禁用 jquery 绑定的事件,源码...

wangaowell
2017/01/19
553
2

没有更多内容

加载失败,请刷新页面

加载更多

Centos7 安装zabbix-agent

rpm -i https://repo.zabbix.com/zabbix/4.2/rhel/6/x86_64/zabbix-release-4.2-2.el6.noarch.rpm 可以到https://repo.zabbix.com/zabbix找到对应的版本 yum install zabbix-agent -y 出现E......

abowu
26分钟前
8
0
文本编辑器GNU nano 4.4 发布

GNU nano 4.4 "Hagelslag" 更新日志: 启动时,光标可以放在第一个或最后一个出现位置 字符串前面带有+/string 或 +?string的字符串。 发生自动硬包装时((--breaklonglines),任何前导引号...

linuxCool
40分钟前
7
0
你知道字节序吗

字节序 最近在调一个自定义报文的接口时,本来以为挺简单的,发现踩了好几个坑,其中一个比较“刻骨铭心”的问题就是数据的字节序问题。 背景 自定义报文,调用接口,服务端报文解析失败 iO...

杭城小刘
51分钟前
3
0
设计模式之依赖倒置原则

方法

东风破2019
52分钟前
6
0
关于如何通过模拟器完成模拟步数提升傻瓜式解决方案(囧)

因为对Android开发不太了解,也没去问朋友所以误打误撞找到的一个提升步数的解决方案,当然只是针对某安APP运动RUN的解决方式吧。 对Android不太了解,所以找了很多的解决方案来看看能不能破...

华山猛男
56分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部