EasyUI datagrid 動態綁定列

時間 2020-05-11

標籤 easyui datagrid 動態綁定简体版

原文原文鏈接

20140604更新，發現了兩種寫法，第二種寫法更佳javascript

第一種：css

查了不少資料，有點亂html

首先聲明一下這裏必需要用easyui1.3.1java

很少說直接上代碼：jquery

首先打開jquery.easyui.min.js，查找_53b()json

找到下面的代碼app

function _53b(){
var _53c=opts.loader.call(_538,_53a,function(data){
setTimeout(function(){
$(_538).datagrid("loaded");
},0);
_4b1(_538,data);
setTimeout(function(){
_52b(_538);
},0);
}

替換成下面這段代碼post

function _53b(){
var _53c=opts.loader.call(_538,_53a,function(data){

//add dynamic columns
if(data!=null && data.cols!=null){
    var opts=$.data(_538, "datagrid").options;           
    var cols = $.data(_538, "datagrid").options.columns[0];      
    var colCount=cols.length;
    if(colCount==0){          
       for (var i = 0; i < data.cols.length; i++) {      
           var col = {      
               field: data.cols[i].field,      
               title: data.cols[i].title,      
               width: data.cols[i].width   
           };      
           cols.push(col);      
       }      
       //UI      
       if (colCount==0 && opts.columns) {      
           _461(_538);
       }      
    }    
}

setTimeout(function(){
$(_538).datagrid("loaded");
},0);
_4b1(_538,data);
setTimeout(function(){
_52b(_538);
},0);
}

而後開始寫html網站

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicDataTable.aspx.cs" Inherits="MyWeb.DynamicDataTable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head runat="server">
    <title></title>
    <link href="js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="js/easyui/jquery.easyui.min.js" type="text/javascript"></script>

    <script src="js/jquery.json/jquery.json-2.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#tbEmployee').datagrid({
                title: 'Customer Infos',
                width: 700,
                height: 350,
                nowrap: true,
                pagination: true,
                rownumbers: true,
                url: 'Services/EmployeeService.asmx/GetCustomerList',
                columns: [[]]
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tbEmployee">
        </table>
    </div>
    </form>
</body>
</html>

後代碼以下：ui

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Web.Script.Services;

namespace MyWeb.Services {
    /// <summary>
    /// EmployeeService 
    /// </summary>
    [WebService(Namespace = ")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    //  ASP.NET AJAX  Web ??
    [System.Web.Script.Services.ScriptService]
    public class EmployeeService : System.Web.Services.WebService {

        [WebMethod]
        public void GetCustomerList() {
            //
            //
            //
            NorthwindEntities db=new NorthwindEntities();
            //
            int count = db.Customers.Count();
            //
            int page = Convert.ToInt32(Context.Request.Form["page"]);
            int rows = Convert.ToInt32(Context.Request.Form["rows"]);
            //
            List<Customers> cusList = db.Customers.OrderBy(c => c.CustomerID).Skip((page - 1) * rows).Take(rows).ToList();
            //JSON
            JObject result = new JObject(
                new JProperty("total", count),
                new JProperty("rows", new JArray(
                    from c in cusList
                    select new JObject(
                        new JProperty("CustomerID", c.CustomerID),
                        new JProperty("Name", c.ContactName),
                        new JProperty("City",c.City),
                        new JProperty("Address",c.Address)
                    )
                ))
            );

            //??
            List<EColumn> colList = new List<EColumn>() {
                new EColumn{Field="CustomerID",Title="",Width=80},
                new EColumn{Field="Name",Title="",Width=80},
                new EColumn{Field="City",Title="",Width=80},
                new EColumn{Field="Address",Title="",Width=120},
            };
            JArray cols = new JArray(
                from c in colList
                select new JObject(
                    new JProperty("field", c.Field),
                    new JProperty("title", c.Title),
                    new JProperty("width", c.Width),
                    new JProperty("sortable", c.Sortable),
                    new JProperty("checkbox", c.Checkbox)
                )
            );
            result.Add(new JProperty("cols", cols));

            Context.Response.ContentType = "application/json;utf-8";
            Context.Response.Write(result.ToString());
        }
    }
}

補充一個類

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MyWeb {
    [Serializable]
    public class EColumn {
        public string Field { get; set; }
        public double Width { get; set; }
        public string Title { get; set; }
        public bool Sortable { get; set; }
        public bool Checkbox { get; set; }
    }
}

OK搞定

原文地址：http://www.cprogramdevelop.com/4142833/

第二種：

這種方法是從一個國外網站上發現的的，膜拜大神！

這裏只上代碼，你會easyuigrid應該就能看懂，大致思路就是，後代得到列的集合後在動態綁定grid，實現的時間有點長，因此就不一點一點介紹了。

function loadData(scmc, scdx, xz, xx, nj, bj,lie) {
                var tj = "";
                if (scmc != "") {
                    tj += "&scmc=" + scmc;
                }
                if (scdx != "") {
                    tj += "&scdx=" + scdx;
                }
                if (xz != "") {
                    tj += "&xz=" + xz;
                }
                if (xx != "") {
                    tj += "&xx=" + xx;
                }
                if (nj != "") {
                    tj += "&nj=" + nj;
                }
                if (bj != "") {
                    bj += "&bj=" + bj;
                }
                //這裏是重點
                var colStruct = [];
                var colItems = [];
                colStruct.pop();
                $.getJSON('/ceshi/ceshi1.ashx?op=anssit' + tj, { page: 1, rows: 10, order: 'asc', sort: 'xh', lie: lie }, function(data) {
                    if (data == null) {
                        alert("沒有信息");
                        return;
                    }
　　　　　　　　　　　　
                    var obj = eval(data.cols);//得到列的集合json
                    for (var i = 0; i < obj.length; i++) {
                        var value = obj[i];
                        var menuItem = {
                            field: value.field,
                            title: value.title,
                            align: value.align,
                            width: value.width,
                            sortable: value.sortable
                        };
                        colItems.push(menuItem);
                    }
                    colStruct.push(colItems);//處理成和easyui原版同樣的格式
                    $('#List').datagrid({
                        columns: colStruct,//直接綁定便可
                        url: '/ceshi/ceshi.ashx?op=anssit' + tj,
                        width: 1000,
                        height: 330,
                        methord: 'post',
                        rownumbers: true,
                        sortName: 'xh',
                        sortOrder: 'asc',
                        idField: 'xh',
                        pageSize: 10,
                        pageList: [10, 20, 30, 40, 50],
                        pagination: true,
                        striped: true, //奇偶行是否區分
                        singleSelect: true
                    });

                });
            }

簡單吧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。