EasyUI 1.3.1 datagrid 동적 바 인 딩 이름과 데이터

9216 단어 jqueryeasyuidatagridC#동적 열
많은 네티즌 들 이 [easyui datagrid 동적 연결 이름과 데이터] 에 대해 많은 의혹 을 가지 고 있 습 니 다. 실험 후 성공 하지 못 한 것 은 버 전의 EasyUI 소스 코드 가 다 르 기 때 문 입 니 다.나 는 최신 버 전의 EasyUI 1.3.1 에 대해 예 시 를 하고 배경 코드 를 간소화 했다.
간단하게 소개 합 니 다. 동적 으로 열 이름 을 연결 하 는 업무 장면: 시스템 에 캐릭터, 권한 정보 가 존재 할 때 표 에 대해 필드 권한 분 배 를 해 야 할 수 있 습 니 다. 예 를 들 어 A 역할 은 직원 표 A, B, C, D, D 필드 를 볼 수 있 고 B 역할 은 직원 A, B, D, F, G 필드 를 볼 수 있 습 니 다. C 역할 은 직원 A, D, E 필드 를 볼 수 있 습 니 다. 이렇게 하면 표 에 있어 필드 는 동태 적 입 니 다.페이지 를 쓸 때 정적 으로 쓸 수 없습니다. 배경 시스템 을 통 해 가 져 와 야 합 니 다.그럼 EasyUI datagrid 를 개조 해 야 합 니 다.
개조 방안: 1. 정적 페이지 에 빈 열 정 보 를 사용 합 니 다.
$('#tbEmployee').datagrid({
 title: '……',
 pagination: true,
 url: '……',
 columns: [[]]
});

2. 전 송 된 데 이 터 를 EasyUI datagrid 에서 가 져 온 데이터 형식 으로 바 꿉 니 다.
{                                                      
 "total":239,                                                      
 "rows":[{……},{……},{……},{……},{……}]                                                          
}

개조 후 json 에 동적 열 정 보 를 추가 합 니 다.
{                                                      
 "total":239,                                                      
 "rows":[{……},{……},{……},{……},{……}],
 "cols":[{……},{……}]
}

3. 동적 로 딩 열 을 개조 합 니 다. 이것 은 가장 실현 하기 어 려 운 절차 입 니 다. 원래 onLoad Success 에서 열 을 불 러 오 려 고 했 는데 결과 가 실현 되 지 않 았 습 니 다. 가 고 싶 은 것 은 기본 구조의 열 이 프레임 워 크 를 통 해 html 코드 를 생 성 했 기 때 문 입 니 다.프로젝트 변경, $. ajax 에서 데 이 터 를 요청 한 후 동적 으로 불 러 와 야 합 니 다. 찾 을 수 있 습 니 다.
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);
}

opts. loader. call 은 ajax 비동기 요청 을 호출 하기 때문에 요청 후 데 이 터 를 얻 을 때 열 을 구성 해 야 합 니 다.
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);
}

주의:461(_538);동적 으로 열 을 추가 하 는 html 방법 으로 찾기 가 어렵 습 니 다.
전체 코드: WEB 페이지:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicDataTable.aspx.cs" Inherits="MyWeb.DynamicDataTable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

WebService 코드:
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 = "http://tempuri.org/")]
    [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; }
    }
}

Web.config 
<?xml version="1.0" encoding="utf-8"?>
<!--
         ASP.NET          ，   
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
      </assemblies>
    </compilation>
  </system.web>
  <connectionStrings>
    <add name="NorthwindEntities" connectionString="metadata=res://*/Northwind.csdl|res://*/Northwind.ssdl|res://*/Northwind.msl;provider=System.Data.SqlClient;provider connection string="data source=vxp;initial catalog=Northwind;integrated security=True;multipleactiveresultsets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
  </connectionStrings>
</configuration>

사용 시 주의: 1. 데이터베이스 연결 문자열 수정;2. Northwind 예제 데이터 베 이 스 를 추가 합 니 다 (인터넷 에 다운로드 가 있 음) 소스 코드 예제 참조: EasyUI 1.3.1 동적 표 열 예제
SqlLite. Net 4.0 System. IO. FileLoadeException 형식의 처리 되 지 않 은 이상 이 XXX 에 나타 납 니 다.
Android 학습용 ScollView 중첩ListView 및 GridView 문제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage