easyui datagrid field配置一样formatter无效解决办法

  easyui datagrid的columns配置,如果存在2个field一样的配置,并且配置了不同的formatter返回不同内容,当生成datagrid内容时,datagrid获取列formatter返回内容只会生成一个field配置的formatter返回的内容,示例如下

easyui datagrid field配置一样formatter无效解决办法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>easyui datagrid field配置一样formatter无效解决办法</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="tg" style="width:100%"></table>
<script>
    $("#tg").datagrid({
        title:'datagrid field出现相同值',
        columns: [[
            { title: 'column-1', field: 'filed1', formatter: function () { return 'data-1' } },
            { title: 'column-2', field: 'filed2', formatter: function () { return 'data-2' } },
            { title: 'column-3', field: 'filed1', formatter: function () { return 'data-3' } }]
        ],
        data: [[], [], [], []]
    });
</script></body>
</html>

    上面第三列filed配置和第一列一样,导致formatter得到的第一列的,所以内容显示column-1,而不是column-3,这是因为easyui datagrid获取formatter时是通过当前列明然后遍历columns数组对比里面的json的field配置值,对比成功就返回第一个出现的formatter,所以不会得到第三列的formatter,内容也就和第一列的一样了。

  解决办法就是field配置不一样的,哪怕是数据中不存在的json键名称也是可以的,如本示例中就没有包含任何具体数据。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>easyui datagrid field配置一样formatter无效解决办法</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="tg" style="width:100%"></table>
<script>
    $("#tg").datagrid({
        title:'datagrid field配置不同列名称才能获取到对应的formatter',
        columns: [[
            { title: 'column-1', field: 'filed1', formatter: function () { return 'data-1' } },
            { title: 'column-2', field: 'filed2', formatter: function () { return 'data-2' } },
            { title: 'column-3', field: 'xxxx', formatter: function () { return 'data-3' } }]
        ],
        data: [[], [], [], []]
    });
</script></body>
</html>

 



原创文章,转载请注明出处:easyui datagrid field配置一样formatter无效解决办法
评论(0)Web开发网
阅读(325)喜欢(1)不喜欢(2)easyui