ligerui中如何动态创建grid

最新推荐文章于 2021-04-05 11:44:21 发布

abo38416

最新推荐文章于 2021-04-05 11:44:21 发布

阅读量352

点赞数

文章标签： json xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/zhaoxd/archive/2013/05/31/3110218.html

版权

在线测试例子: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 
          >

转载于:https://www.cnblogs.com/zhaoxd/archive/2013/05/31/3110218.html

abo38416

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ligerui中如何动态创建grid

在线测试例子:http://vazumi.net.s1.kingidc.net/example/dynamicgrid.htm截图:原理:开发一个系统，比如说有几十个基本资料表，新增修改删除这些基本功能，按照ligerui创建模式，每个表要一个页面吧虽然是简单的复制粘贴代码，也很麻烦吧，代码冗余严重能否根据数据源，自动创建grid，可以，思路有2种1.后台根据...
复制链接

扫一扫