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>

有问题请留言