ligerui中如何动态创建grid
在线测试例子: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 >
|
转载于:https://www.cnblogs.com/zhaoxd/archive/2013/05/31/3110218.html