jqGrid怎么批量添加JSON数据?addJSonData怎么用?

jqGrid怎么批量添加JSON数据?addJSonData怎么用?,第1张

1.addJSONData和addRowData有点区别,后者是绑定在jquery对象的,前者是绑定在标签上的。

用addJSONData时举例:$("#table")[0].addJSONData(data)

用FF可以看到$("#table")[0]上绑定的事件的。

2.addJSONData接受的参数:

这是后台的.net代码

new JObject() {

new JProperty("total","1"),

new JProperty("page","1"),

new JProperty("records","3"),

new JProperty("rows",yourArrayData)

}

可以看到addJSONData接受的并不是一个数组,就是一个json对象,开始一直也困扰在这里。

前台返回的JSON:

{"total":"1","page":"1","records":"3","rows":[{"UserID":1,"UserName":"kp","Password":"123","Domain":null,"RoleID":null},{"UserID":2,"UserName":"kptest","Password":"Kp123","Domain":null,"RoleID":null},{"UserID":3,"UserName":"ricky","Password":"123","Domain":"XSUNT-SH\\dong.geng","RoleID":1}]}

3.还有一点需要注意的,jqgrid需要定义一个jsonReader其中的repeatitems如果不指定为false FF会返回obj is undefined

jsonReader: {

repeatitems: false,

rows: "rows",            

total: "total",

page: "page",

records: "records"

}

4.$("#table").addJSONData(data)的调用位置也值得注意,最后只有在loadComplete中才能加载出数据,gridComplete里不可以,方法外也不行。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Context Menu on DataGrid - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery.min.js"></script>

    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

    <h2>Context Menu on DataGrid</h2>

    <p>Right click on the header of DataGrid to display context menu.</p>

    <div style="margin:20px 0"></div>

    <table id="dg"></table>

    <script type="text/javascript">

        $(function(){

            $('#dg').datagrid({

                url: 'datagrid_data1.json',

                method: 'get',

                title: 'Context Menu on DataGrid',

                iconCls: 'icon-save',

                width: 700,

                height: 250,

                fitColumns: true,

                singleSelect: true,

                columns:[[

                    {field:'itemid',title:'Item ID',width:80},

                    {field:'productid',title:'Product ID',width:120},

                    {field:'listprice',title:'List Price',width:80,align:'right'},

                    {field:'unitcost',title:'Unit Cost',width:80,align:'right'},

                    {field:'attr1',title:'Attribute',width:250},

                    {field:'status',title:'Status',width:60,align:'center'}

                ]],

                toolbar:[{

                    iconCls: 'icon-add',

                    handler:function(){

                        for(var i=0i<5i++){

                            $('#dg').datagrid('appendRow',{

                                itemid: '',

                                productid: '',

                                listprice: '',

                                unitcost:'',

                                attr1:'',

                                status:''

                            })                            

                        }

                    }

                }]

            })

        })

    </script>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11475161.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存