在線測試例子: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>
有問題請留言