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:'',width:''});
});
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:'创建时间',width:130},{field:'updatetime',title:'更新时间',width:130},]]。
一开始我以为是字符串,但是当我用console.info()输出带控制台的时候,发现它是个对象,所以一开始字符串拼接就是错了。所以要想动态构造column 的属性格式,必备按照它原来的格式来。
所在我定义两个数组,array[],colums[](这个columns 是我自定的数组对象,不是datagrid的属性)。
$(data).each(function(){
array.push({field:'',title:'',width:''});
});这个方法是为了给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){}也可以在次添加,这里用了两次循环,比较烦。
我再次承认效率上是存在问题的,欢迎请大家品评与指正!
easyui datagrid 动态添加columns属性的更多相关文章
- python装饰器、继承、元类、mixin,四种給类动态添加类属性和方法的方式(一)
介绍装饰器.继承.元类.mixin,四种給类动态添加类属性和方法的方式 有时候需要給类添加额外的东西,有些东西很频繁,每个类都需要,如果不想反复的复制粘贴到每个类,可以动态添加. # coding=u ...
- easyui datagrid checkbox multiple columns have been done do
lengku1987 2013-01-06 22:27:47 Sponsored Links easyui datagrid checkbox multiple columns have ...
- easyui datagrid 动态加载数据 渲染问题,表格错位问题
$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...
- EasyUI datagrid动态生成列
任务描述:根据用户选择时间段,生成列数据,如图
- easyui datagrid动态设置行、列、单元格不允许编辑
Easyui datagrid 行编辑.列编辑.单元格编辑设置 功能: 动态对datagrid 进行行.列.单元格编辑进行设置不允许编辑. 禁用行编辑: 在编辑方法调用前,对选择的行进行判断,如果不允 ...
- Easyui datagrid 怎么添加操作按钮,rowStyler
说明:本篇文章主要是展示怎么设置easyUI datagrid的格式,包括行样式和列样式,以及添加操作按钮列 开发环境 vs2012 asp.net mvc4 c# 1.效果图 3.HTML代码 & ...
- easyui datagrid 动态加入、移除editor
使用easyui 行编辑的时候完毕编辑的功能比較简单,可是假设要依据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比較麻烦了. 比方像以下这样:加入行的时候每一个值都是手动输入,改动的时候第 ...
- easyui datagrid 动态操作editor 的方法
easyui本身是不提供这么细节的功能的,需要我们自己拓展下: 在easyui.min.js中扩展: $.extend($.fn.datagrid.methods, { addEditor : fun ...
- 导航栏动态添加act属性
最近做了一个网站,需要设置导航栏的act属性,这里需要用到addClass以及removeClass: $('#topName li').removeClass('active'); $(this). ...
随机推荐
- 阿伦学习html5 之 Local Storage (本地储存)
一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.S ...
- iOS进阶之多线程
多线程 注意:iOS关于UI的刷新和添加必须在主线程中操作! pthread的创建方法: pthread_t pthread; //第一个参数 线程指针 //第二个参数 线程的一些属性 //第三个参数 ...
- freeCAD文档结构
一个freecad文档包含了你场景中的所有物体.它可以包含组及任何工作平台制造的物体.你可以切换工作台,但是它仍然工作在同一个文档上.当您保存您的工作时,该文件就被保存到磁盘上.你可以同时打开多个fr ...
- Hive的API的说明
之前通过命令行的界面可以操作Hive,可是在实际的生产环境中,往往都是需要写API的,因此对Hive的API简单的列举了一下.并对Hive进行了一个简单的封装.具体的封装可以参考github网站主页: ...
- 关于css的新思考
因为被派去协助别的组,有机会写了一下react,发现ICE做的那一个套件用来搭建后台系统真的太给力了(插一句必入table组件其实是可以把删除添加座位基础方法加进去的).因为看了demo的代码以及对于 ...
- 3dsMax用到的网格优化
3dsMax软件主要是用于建模的,里面有一个网格优化的功能,它的网格优化的过程是基于那个网格简化算法,经过使用个人认为是基于几何删除的折叠方式来进行的,可能是边折叠或者三角折叠的方式,还望大神多多指教 ...
- 结构及其使用 struct (C#)
首先结构是值类型. 结构是使用 struct 关键字定义的,结构如下: struct 结构名{} 结构概述 结构具有以下特点: 结构是值类型,而类是引用类型. (结构不能包含显式的无参数构造函数) 与 ...
- renderman、arnold及全局光照
走马观花看了一些实现全局光(global illumination)的文章,都是非实时电影级的.的确可以分为两个阵营,一是pixar的renderman中常用的reyes+点云,感觉pixar一路走来 ...
- SE Homework 1 —An Error Impressed Me
在对两个对象进行比较.判断是否相等时,直接用 == 放在两个对象中间,例如下面的代码: Infor i1 = new Infor(111,"AA"); Infor i2 = new ...
- Thinkphp_基础(2)URL模式
URL请求 ThinkPHP采用单一入口模式访问应用,对应用的所有请求都定向到应用的入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作,下面是一个标准的URL访问格式: http://se ...