知识分享：EasyUI Datagrid 翻页事件中动态绑定数据列

[Ny-6000]

知识分享：EasyUI Datagrid 翻页　事件中动态绑定数据列

说明，一般ｄａｔａｇｒｉｄ数据列是固定的，即便是动态，也会是页面加载时固定计算好．

而本次遇到的问题是每次触发翻页事件后，都需要动态的绑定数据列，列多少和列名称都可能发现变化，同时数据前几个字段还是固定显示的

花了大半天时间，总算解决了这个功能问题，只是性能还不如人意，每次翻页，需要查询４次数据库才得到想到的结果
－－－能达到这一步也算不易，先共享下，也免得自己忘记了

 $(function () {
//页面初始化
            InitGird(1,1,10);
       });

//定义动态列对象
        var mycolumns = new Array(); 
        function InitColumnsGird(pageNumber,sizePage) {
            var formData = getObj('form_query');
            formData.method = "queryColumns";
            formData.page = pageNumber;//动态赋值
            formData.rows = sizePage;//动态赋值
            $.post(location.href, formData, function(result){
                var data = JSON.parse(result);
                mycolumns = new Array(); 
                $.each(data.headers, function(){  
                    var column={};  
                    column["title"]=this.titleV;
                    column["field"]=this.fieldV;
                    column["width"]=this.widthV;
                    column["formatter"]=zeroformatter;
                    mycolumns.push(column);
                });
               //获取列对象后,重新加载数据,此时参数,不会再次获取列对象了
                InitGird(0, pageNumber, sizePage);
            });
        }

        function InitGird(isInitCol, pageIndex, sizePage) {
            var formData = getObj('form_query');
            formData.method = "queryData";
            $.post(location.href, formData, function(result){
                $("#dgvData").datagrid({
                    title: 'DatList',  
                    url: location.href,  
                    idField: 'JNO'
                    ,striped:true
                    ,pagination:true
                    ,rownumbers:true
                    ,checkOnSelect:false
                    ,selectOnCheck:false
                    ,singleSelect:false
                    ,showFooter:false
                    ,loadMsg: "正在加载中",
                    frozenColumns :[[  
                        { field: 'ID', title: 'ID', checkbox: true },
                        { field: 'JNO', title: '工号', width: '110' }
                    ]],columns : [
                        mycolumns  
                    ],
                    queryParams: formData,
                    pageNumber: pageIndex,//动态赋值
                    pageSize: sizePage,//动态赋值
                    pageList: [10, 20, 50, 100],
                    onLoadSuccess: function() {
                        $(this).datagrid("fixRownumber");
                    }
    //此处是关键部分
                    ,onBeforeLoad: function() {
                        if(isInitCol==1)
                        {           
                            mycolumns = null; 
                            var opts = $(this).datagrid('options');
                            InitColumnsGird(opts.pageNumber,opts.pageSize);
                        }
                        else
                        {
                            isInitCol=1;
                        }
                    }
                });
            });
        }

[Ny-6000]

页面后台代码示例:

        protected void Page_Load(object sender, EventArgs e)
        {
            string method = "";
            if (Request.Form["method"] != "")
                method = Request.Form["method"];

            switch (method)
            {
                case "queryColumns"://查询列
                    GetData(0);
                    break;
                case "queryData"://查询数据
                    GetData(1);
                    break;
         }
  }

        private void GetData(int argValue)
        {
            int pageindex = GetFormString("page") == "" ? 1 : Convert.ToInt32(GetFormString("page"));
            int pagesize = GetFormString("rows") == "" ? 10 : Convert.ToInt32(GetFormString("rows"));

            var sqlParas = new List<SqlParameter>();
            string strWhere = GetWhere(ref sqlParas);

            var ds = GetDataSet(strWhere, sqlParas, pageindex, pagesize);

            if (argValue.Equals(1))
            {
                string body = ds.ToJsonString(); //自定义转换json方法
                Response.Write(body);
                Response.End();
            }
            else
            {
                List<ColItem> ColList = GetColumns(ds.Tables[0].Columns);
                var header = ColList.ToJsonString();//自定义转换json方法
                Response.Write("{\"headers\":" + header + ",\"bodys\":\"\"}");
                Response.End();
            }
        }



//动态列对象定义
        public class ColItem
        {
            public string titleV;
            public string fieldV;
            public int widthV;
        }
        public List<ColItem> ColList
        {
            get;
            set;
        }

[Ny-6000]

解决这个问题过程中,遇到的问题有三个 1.页面动态列一直是第一次加载时的,不能根据第二页数据动态更新 2.页面无限循环刷新 3.分页控件中显示参数改变后绑定数据实际没变化 以上解决方式也不算完美,但功能上总算实现了,只是也没细测 不知有各位大侠,可否有更好解决办法,还望指教.

[Ny-6000]

自己来顶个来着.

[海宏AA]

不错，帮顶！