在线测试例子:http://vazumi.net.s1.kingidc.net/example/dynamicgrid.htm
截图:
原理:
开发一个系统，比如说有几十个基本资料表，新增修改删除这些基本功能，按照ligerui创建模式，每个表要一个页面吧
虽然是简单的复制粘贴代码，也很麻烦吧，代码冗余严重
能否根据数据源，自动创建grid，可以，思路有2种
1.后台根据数据源创建js，前台页面引用，达到动态grid的效果
2.前台根据json，把表格搭建起来
本文采用方法2，提供一个思路，读json，组合字符串拼接列名，然后生成grid
代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head> <title></title> <link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script> <script type="text/javascript"> var grid=null; var j; function creategrid(divname,url) { $("#"+divname).remove(); var div = "<div id='"+divname+"' style='margin:0; padding:0'></div>"; $(document.body).append(div); $.getJSON(url,{ page: 1,pagesize:10 ,Rnd: Math.random() }, function(json) { var colnames=""; for(var i in json.Rows[0]) //在这里读json的列名，当作表格的列名 { if (!(i=='RECORDCOUNT' || i=='PASSWORD')) colnames+=",{name:'"+i+"',display:'"+i+"'}"; } colnames=colnames.substr(1,colnames.length); j=json; eval( "grid=$('#"+divname+"').ligerGrid({"+ "checkbox: true,"+ "columns:["+colnames+"],"+ //然后么拼字符串 //"data:j,"+ //这么写适合不分页的grid,还少读一次数据库 "url:'"+url+"',"+ "dataAction:'server',"+ "pageSize:10,pageSizeOptions: [10, 15, 20, 30, 50, 100]"+ "});" ); }); } </script></head><body style="padding:10px"> <input type="button" onclick="creategrid('g','/service/DataHandler.ashx?View=rulelist')" value="动态grid1" /> <input type="button" onclick="creategrid('g','/service/DataHandler.ashx?View=thread&id=999&type=system')" value="动态grid2" /> <input type="button" onclick="creategrid('g','/service/DataHandler.ashx?View=city')" value="动态grid3" /> <input type="button" onclick="creategrid('g2','/service/DataHandler.ashx?View=thread&id=999&type=system')" value="增加grid2" /> <input type="button" onclick="creategrid('g3','/service/DataHandler.ashx?View=city')" value="增加grid3" /> <input type="button" onclick="$('#g2').remove();" value="删除grid2" /> <input type="button" onclick="$('#g3').remove();" value="删除grid3" /> </body></html> |