easyui datagrid动态绑定列名和数据

 1 <body>
 2     <div class="easyui-layout" style="width:1000px;height:400px;">
 3         <div data-options="region:'center'">
 4             <table id="dg"></table>
 5         </div>
 6     </div>
 7   </body>
 8   <script type="text/javascript">
 9   
10       $(function(){
11         downorreloaddata();
12     });
13     function renderView(){
14         var col="";
15         var obj;
16           $.ajax({
17             url:'<%=request.getContextPath() %>/esbServer.do?method=execProc&methodId=cs_proc_get_colsname&in_type_id=20130715000003',
18             type:'post',
19             async:false,
20             dataType:'text',
21             success:function(data){
22                 if(!data)return;
23                 objs=eval("[" + data + "]");
24                 if(objs.length>0 && objs[0].returncode=='ok'){
25                     for(var i=0;i<objs[0].queryresult.length;i++){
26                         if(i==objs[0].queryresult.length-1){
27                             col+="{ field : '"+objs[0].queryresult[i].col_code+"',"
28                                     +"title : '"+objs[0].queryresult[i].col_name+"',"
29                                     +"width : 100,"
30                                     +"align : 'center'"
31                                     +"}]]";
32                         }else if(i==0){
33                             col+="[[{ field : '"+objs[0].queryresult[i].col_code+"',"
34                                     +"title : '"+objs[0].queryresult[i].col_name+"',"
35                                     +"width : 100,"
36                                     +"align : 'center'"
37                                     +"},";
38                         }else{
39                             col+="{ field : '"+objs[0].queryresult[i].col_code+"',"
40                                     +"title : '"+objs[0].queryresult[i].col_name+"',"
41                                     +"width : 100,"
42                                     +"align : 'center'"
43                                     +"},";
44                         }
45                     }
46                 }
47                 
48                 return col;
49             }
50         });
51           return col;
52     }
53     function downorreloaddata(){
54         ajaxData('#dg',getDataUrl,getrenderView,undefined,undefined,undefined);
55     }
56     function getDataUrl(){
57         return "<%=request.getContextPath() %>/esbServer.do?method=execProc&methodId=cs_proc_personandcol_query&in_type_id=20130715000003";
58     }
59     function getrenderView(){
60         var options={};
61         $("#dg").datagrid({
62               title : '人员信息维护',
63               type : 'POST',
64               nowrap : true,
65               striped: true,//设置为true将交替显示行背景。
66               fit : true,
67               width : 'auto',
68               height : 'auto',
69               url : '',
70               pageSize : 20,
71               pageList:[10,20,30,40,50,100],
72               remoteSort : false,
73               pagination : true,//是否显示分页
74               rownumbers : true,//显示行数
75               singleSelect : false,//设置为true将只允许选择一行。
76               collapsible : true,
77               iconCls : 'icon-ok',
78               animate: true,
79               fitColumns: true,//fitColumns（自适应列宽）
80               showFooter: false,
81               loadMsg:'正在加载，请稍后……'
82         });
83         var col=renderView();
84         options.columns=eval(col);
85         $("#dg").datagrid(options);
86         $("#dg").datagrid('reload');
87     }
88   </script>
posted on 2013-09-18 11:01 mustbe幸福阅读(269) 评论(0) 收藏举报
刷新页面返回顶部
mustbe幸福

公告

easyui datagrid动态绑定列名和数据
