When the company designs a project , There is a need , The fields in the table are not unique , A table can have three fields , It could be five , But it has to be displayed on the page , Make this for me ui A little bit of trouble . Because I used to use easyui Of datagrid Inside columns Attributes are all fields in the corresponding database table , Now the fields don't know , How to use it? datagrid Display data ? I'm here to introduce the most stupid way , It's just stitching together columns Format of attributes , I admit that , My method is not efficient , But when you can't do it ,, This may be the solution to the problem , Of course, before we solve this problem , I also Baidu a bit , Tried something , There's a lot to change datagrid The method in , And the method from the new structure , I am a rookie , Too deep to understand , So we only use this method .

First step : Get all the columns of this table ,( You should know the name of the table ), I use it mysql database , So it's based on the table name sql yes :

select column_name from INFORMATION_SCHEMA.columns where table_name='tableName' and TABLE_SCHEMA='dbName';
tableName: It's the name of your watch :dbName: It's the name of your database . This article sql The result of statement execution is ( This is my watch ):

 This gets the fields of the table .
The second step : To write js Code , I'm not going to introduce how to get the background .
var array =[];
var columns=[];
$.ajax({
url:_ctx+'/nodeManage/getMysqlFields',
type:'POST',
data:'id='+node['id'],
success:function(data){//data The table field array passed from the background
$(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'
});
 Their thinking :
First we know that datagrid colums The attribute format of is :[[{field:'createtime',title:' Creation time ',width:130},{field:'updatetime',title:' Update time ',width:130},]].
 At first I thought it was a string , But when I use console.info() When the output comes with a console , It turns out that it's an object , So in the beginning, string splicing was wrong . So to construct dynamically column The attribute format of , It must be in its original format .
So I define two arrays ,array[],colums[]( This columns It's my own array object , No datagrid Properties of ).
$(data).each(function(){
array.push({field:'',title:'',width:''});
}); This method is for array Add a certain length of content , Let's put this array adopt push() Put in your own definition of columns in , So what we get columns The object format of is the same as datagrid equally , Then I will customize columns Pay to dagagrid Of columns attribute ( Don't faint ).
$(data).each(function(index,el){
columns[0][index]['field']= el['column_name'].toLocaleLowerCase();( because field The value of must be lowercase , You know what you've used , In order to prevent you from using uppercase when creating fields in the database , So make a transition here )
columns[0][index]['title']= el['column_name'];
columns[0][index]['width']= "130";
}); This step is just defined for columns Array assignment , That is, the field name you get from the background . image formatter:functions(value,row,index){} You can also add , Two cycles are used here , It's annoying .
Once again, I admit that there are problems with efficiency , Welcome to comment and correct !



easyui datagrid Dynamic addition columns More articles on attributes

  1. python Decorator 、 Inherit 、 The metaclass 、mixin, Four ways to dynamically add class properties and methods to a class ( One )

    Introduce the decorator . Inherit . The metaclass .mixin, Four ways to dynamically add class properties and methods to a class Sometimes you need to add something extra to the class , There's something very frequent , Every class needs , If you don't want to copy and paste to each class repeatedly , You can add dynamically . # coding=u ...

  2. easyui datagrid checkbox multiple columns have been done do

    lengku1987   2013-01-06 22:27:47   Sponsored Links   easyui datagrid checkbox multiple columns have ...

  3. easyui datagrid Load data dynamically Rendering problems , Form misplacement problem

    $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...

  4. EasyUI datagrid Dynamically generate Columns

    Task description : Select the time period according to the user , Generate column data , Pictured

  5. easyui datagrid Dynamic settings line 、 Column 、 Cells are not allowed to edit

    Easyui datagrid Line edit . Column editor . Cell edit settings function : Dynamic to datagrid Go ahead . Column . Cell editing is set. Editing is not allowed . Disable line editing : Before editing method calls , Judge the selected line , If not ...

  6. Easyui datagrid How to add action buttons ,rowStyler

    explain : This article mainly shows how to set up easyUI datagrid The format of , Including row styles and column styles , And add action button Columns development environment vs2012  asp.net mvc4 c# 1. design sketch 3.HTML Code & ...

  7. easyui datagrid Dynamic join 、 remove editor

    Use easyui When editing a line, the editing function is relatively simple , However, if you want to dynamically change other values according to the value of a box, or disable a box when editing, it will be troublesome . Like this : When adding rows, each value is entered manually , When it's changed ...

  8. easyui datagrid Dynamic operation editor Methods

    easyui It does not provide such a detailed function , We need to expand ourselves : stay easyui.min.js In the extended : $.extend($.fn.datagrid.methods, { addEditor : fun ...

  9. Navigation bar dynamic add act attribute

    Recently I made a website , Need to set the navigation bar act attribute , I need to use addClass as well as removeClass: $('#topName li').removeClass('active'); $(this). ...

Random recommendation

  1. Close edit easyui datagrid table

    var rows = dg.datagrid('getRows');    for (var i = 0; i < rows.length; i++) {        dg.datagrid( ...

  2. extjs ajax java Simple and elegant verification code implementation A figure

    front end : utilize ExtJs Of autoEl Function to load pictures . var imgCheckValid = new Ext.create('Ext.Component',{ width: 70, // Image width heig ...

  3. Generate XML file , Through entity generation XML file

    Entity using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Xm ...

  4. OGG problem ORA-01403 How to deal with it

    know logdump Analysis tools and common commands :http://book.51cto.com/art/201202/319253.htm http://www.killdb.com/2012/09/01/gold ...

  5. c3p0 Connect to database

    <?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <default-con ...

  6. git Setting does not require a password , Remove fetch / pull Code needs to enter password every time

    https You have to enter the password every time , According to the following settings, you can input once without the trouble of manually entering the password, and enjoy https The speed it brings Set remember password ( Default 15 minute ): git config --global credenti ...

  7. Redis install 、 Problems with commands and password settings

    One . download Redis without install wget Install first wget and gcc( Use make I'll use it when I'm on the road ) wget http://download.redis.io/releases/redis-4.0.8.ta ...

  8. Jenkins Passing custom parameters

    1. The same job Between , Different shell Pass parameters between Be careful : If it is job Parameterize building custom parameters , Can be in job Different shellj Inter reference , But you can't change his value for later shell Use   job When it is executed, it will be aimed at ...

  9. Php cli Error reporting in mode /usr/bin/php: /usr/local/lib/libxml2.so.2: no version information available (required by /usr/bin/php)

    centos Next php cli Mode error /usr/bin/php: /usr/local/lib/libxml2.so.2: no version information available (requ ...

  10. For developers to write MaxCompute SQL Better ,DataWorks enhance SQL Editor function

    as everyone knows , Data development and analysis students spend a lot of time writing every day MaxCompute SQL:Dataworks As part of data development IDE It directly affects everyone's development efficiency , This time, the new online Dataworks We did a lot of work on the editing experience ...