Flexigrid从对象中加载数据

Posted 2020-08-10

　　Flexigrid是用来动态加载数据的一种比较好（老）的Jquery表插件，然后有些时候，我们需要其从本地或者jQuery对象中加载数据，比如有这么个需求，页面显示中有两个表格A和B，其中A表格从服务器端加载数据，B表格需要根据用户的操作来动态更新，例如当用户勾选住A表格的某些项时，B表格就把这些项显示在其中。对于这么个请求，可以如下解决：

　　　　1）建立一个Jquery对象C，用于保存B表格的信息；

　　　　2）当用户选择A表格中的某些项时，C更新它所保存的内容；

　　　　3）当C的内容发生变化时，B表格更新其显示。

　　上述过程中，需要动态的使用Flexigrid来加载本地对象中数据，下面是flexigrid加载jquery对象中的数据的代码示例：

 1 /*
 2 * testerContainer用于保存行对象的部分值，它用于提供flexigrid的本地加载数据，其中的page用于表示页数，total用于保存总个数，rows保存的是一组对象，每个对象对应一行，
 3 * 此处只需要保存name与username信息，当从flexigrid中获取行对象（使用getAllRows类似的方法）时，除了指定的信息，flexigrid还会自动生成_status与flexigrid_index字段。
 4 */
 5 var testerContainer={"page":1,
 6 　　　　　　　　　　"rows":[ 
 7 　　　　　　　　　　　　　　{name:"sd",username:"ds"},
 8 　　　　　　　　　　　　　　{name:"sds",username:"dss"}
 9 　　　　　　　　　　　　　　],
10 　　　　　　　　　　"total":0}
11 
12 //配置对象
13 var gridSettingChoose={
14 　　　　　　dataType:‘json‘,
15 　　　　　　height:390,
16 　　　　　　colModel : [
17 
18 　　　　　　　　　　//当用空字符串指定display值时，flexigrid会自动认为他是checked框，对应flexigrid行对象的_status字段
19 　　　　　　　　　　{display: ‘‘, name : ‘checked‘, width : 60, align: ‘center‘},
20 　　　　　　　　　　//当name指定为‘flexigrid_index‘，flexigrid会默认替他生成序列号,对应flexigrid的行对象的flexigrid_index字段
21 
22 　　　　　　　　　　{display: ‘序号‘, name : ‘flexigrid_index‘, width : 60, align: ‘center‘,sortable:false},
23 　　　　　　　　　　{display: ‘姓名‘, name : ‘name‘, width : 120, align: ‘center‘,sortable:false},
24 　　　　　　　　　　{display: ‘用户名‘, name : ‘username‘, width : 120, align: ‘center‘,sortable:false},
25 　　　　　　　　　　],
26 　　　　　　resetHeight:true,
27 　　　　　　rp:10,
28 　　　　　　rpOptions : [10,15,20]
29 　　　　　};
30 //加载表格
31 var   gridChoose=$(".testerDialogGridChoose").flexigrid(gridSettingChoose);
32 
33 //加载数据
34 gridChoose.flexAddData(testerContainer);