zoukankan      html  css  js  c++  java
  • easyui datagrid 动态添加columns属性

    公司在项目设计的时候,有一个需求,就是查出来的表的字段不唯一,一张表的字段可能是三个,也可能是五个,但是却要把它显示到页面,这个给我做ui的带来一点麻烦。因为以前一般用easyui 的datagrid里的columns属性都是对应数据库表里的字段,现在字段都不知道,怎么用datagrid显示数据呢?本人在这里介绍最笨的办法,就是拼接出columns 属性的格式,我承认,我的办法效率不高,但是当你无从下手的时候,,这未尝不是解决问题的办法,当然在解决这个问题之前,我也百度了一下,试了一些办法,有的是是去更改datagrid里的方法,以及从新构造里的的方法,本人是菜鸟,太高深的东西看不懂,所以只用了这个本办法。

    第一步:获取这个张表的所有列,(表名你应该知道的),我用的是mysql数据库,所以根据表名获取的sql是:

    select column_name from INFORMATION_SCHEMA.columns where table_name='tableName'  and TABLE_SCHEMA='dbName';
    tableName:是你的表的名字:dbName:是你的数据库的名字。该条sql语句执行的是结果是(这是本人表):

    这样就获取表的字段。

    第二步:编写js代码,获取后台的方法我就不在此介绍。

    var array =[];
    var columns=[];
    $.ajax({
            url:_ctx+'/nodeManage/getMysqlFields',
            type:'POST',
            data:'id='+node['id'],
            success:function(data){//data后台的传过来的表字段数组
                  $(data).each(function(){
                      array.push({field:'',title:'',''});
                   });
                   columns.push(array);
                   $(data).each(function(index,el){
                          columns[0][index]['field']= el['column_name'].toLocaleLowerCase();
                          columns[0][index]['title']= el['column_name'];
                          columns[0][index]['width']= "130";
                   });
                   $('#dg').datagrid({
                             fit:true,checkOnSelect:true,  selectOnCheck:true,   singleSelect:true,toolbar:'#queryToolbar',
                             pageSize : 5,
                             columns:columns,
                             dataType: 'json',
                             pageList: [5,10,30,50,70,100],
                             pageNumber : 1,
                             pagination:true,
                             queryParams:{id:node['id']},
                             url:_ctx+'/nodeManage/getMd5Datagrid'
                   });
                },
                dataType:'json'
     });
    解题思路:
    首先我们知道datagrid colums的属性格式是:[[{field:'createtime',title:'创建时间',130},{field:'updatetime',title:'更新时间',130},]]。
    一开始我以为是字符串,但是当我用console.info()输出带控制台的时候,发现它是个对象,所以一开始字符串拼接就是错了。所以要想动态构造column 的属性格式,必备按照它原来的格式来。
    所在我定义两个数组,array[],colums[](这个columns 是我自定的数组对象,不是datagrid的属性)。
    $(data).each(function(){
        array.push({field:'',title:'',''});
     });这个方法是为了给array添加一定长度的内容,让后在将这个array通过push()放进自己定义的columns里,这样我们的得到的columns的对象格式就是跟datagrid 一样,然后将自定义的columns付给dagagrid的columns属性(别晕呀)。
    $(data).each(function(index,el){
           columns[0][index]['field']= el['column_name'].toLocaleLowerCase();(因为field的值必须是小写,用过的都知道,为了防止数据库里建字段的时候你的是大写,所以在这里做个转换)
           columns[0][index]['title']= el['column_name'];
           columns[0][index]['width']= "130";
    });这一步是给刚定义的columns数组赋值,也就是你从后台获取的字段名。像formatter:functions(value,row,index){}也可以在次添加,这里用了两次循环,比较烦。
    我再次承认效率上是存在问题的,欢迎请大家品评与指正!









    本文为博主原创文章,未经博主允许不得转载
  • 相关阅读:
    【转】:java遍历List时动态添加和删除元素
    【转】:浅析 Comparable和 Comparator的区别
    【转】:Synchronized同步静态方法和非静态方法总结
    【转】:学习路线(自用)
    js原型链的理解
    关于浏览器切换标签或者移动端切换应用时,js不执行的解决方案
    .net core连接mongoDB
    首先从项目结构开始讲起
    iOS应用内支付(IAP)服务端端校验详解
    .net支付宝SDK接入这些坑你必须知道
  • 原文地址:https://www.cnblogs.com/breet1413/p/4259610.html
Copyright © 2011-2022 走看看