ligerui中如何动态创建grid
在线测试例子:http://vazumi.net.s1.kingidc.net/example/dynamicgrid.htm
截图:
原理:
开发一个系统，比如说有几十个基本资料表，新增修改删除这些基本功能，按照ligerui创建模式，每个表要一个页面吧
虽然是简单的复制粘贴代码，也很麻烦吧，代码冗余严重
能否根据数据源，自动创建grid，可以，思路有2种
1.后台根据数据源创建js，前台页面引用，达到动态grid的效果
2.前台根据json，把表格搭建起来
本文采用方法2，提供一个思路，读json，组合字符串拼接列名，然后生成grid
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
有问题请留言
