datagrid动态加载列

    最近参加了组织部的项目，由于加载的表头需要从数据库中读取，而且你也不知道有几个，这就用到了动态加载列。经过研究理解，有了一点点成效。。。

    由于本项目中既有固定的列也有动态添加的列，这个思路就是：先将固定的列写下来，从数据库中查询动态添加的列，将这些列表头信息放到一个对象数组中，再循环数组分别为每一列赋值。这是实现的主要思想，接下来就看如何去实现。

    首先先建一个ViewModel，用来表示加载表头的属性：

<span style="font-size:18px;">     public class TableHeaderViewModel
     {
        [DataMember]
        public string FieldValue;//FieldValue:键值
        [DataMember]
        public string FieldText;//FieldText:显示名称
        [DataMember]
        public bool Hidden;//是否隐藏
        [DataMember]
        public string Editor;//启用编辑
        //如果我们还想扩展这个这个DataGrid的属性，在此添加相应的属性
        //注意一些using引用

     }</span>

    采用mvc框架，controller中的代码如下：

     public ActionResult ShowDataTables()
        {
            //表头实体集合
            List<TableHeaderViewModel> listHeaderVM = new List<TableHeaderViewModel>();
            //固定表头
           
            TableHeaderViewModel judgeHeader1Hide = new TableHeaderViewModel //固定的列
            {
                FieldValue = "DevelopmentName",
                FieldText = "开发区名称",
                Hidden = false
            };
            listHeaderVM.Add(judgeHeader1Hide);

            TableHeaderViewModel judgeHeader2Hide = new TableHeaderViewModel //固定的列
            {
                FieldValue = "QualitativeTargetName",
                FieldText = "指标名称",
                Hidden = false
            };
            listHeaderVM.Add(judgeHeader2Hide);

            //获取界面数据
            string QualitativeTargetID = Request["TargetID"];
            int year = int.Parse(Request["year"]);
            //从数据库获取要动态加载的表头
            List<QualitativeLevelViewModel> unitBasicInfoList = SetQualitativeTargetLeval.QueryTargetLevel(QualitativeTargetID, year);
            //动态加载表头
            foreach (var item in unitBasicInfoList)
            {
                TableHeaderViewModel JudgeHeader = new TableHeaderViewModel();
                JudgeHeader.FieldValue = item.QualitativeLevelID.ToString();
                JudgeHeader.FieldText = item.QualitativeLevalName;
                JudgeHeader.Hidden = false;
                JudgeHeader.Editor = "text";
                listHeaderVM.Add(JudgeHeader);
            }
            TableHeaderViewModel judgeHeaderHide = new TableHeaderViewModel //固定的列
            {
                FieldValue = "Remark",
                FieldText = "备注",
                Hidden = false,
                Editor="text"
            };
            listHeaderVM.Add(judgeHeaderHide);

            return Json(listHeaderVM, JsonRequestBehavior.AllowGet);
        }

    从controller中传来值之后，接下来就是将传过来的值在js中改变排列方式，显示到界面中。

     

   function load_Table() {//加载本地表头
     var TargetID = $('#target').combobox("getValue");
     var year = $('#CheckYear').combobox("getValue");
  
    $.ajax({
        url: '/DevelopmentQualitative/ShowDataTables',
        async: false, // 注意此处需要同步，因为先绑定表头，才能绑定数据
        type: "POST",
        data:"year=" + year + "&TargetID=" + TargetID,
        dataType: "json",
        success: function (jsonObj) {
            var columnsAll = new Array();                  
            
            //如果返回的数据不为空,则添加遍历该数据集合
            if (jsonObj.length > 0) {
                var col1 = {}
                col1['field'] = 'ck';
                col1['checkbox'] = true;
                columnsAll.push(col1);   //添加多选框列
                for (var i = 0; i < jsonObj.length; i++) {
                    var col = {}
                    //把返回的数据封装到一个对象中                   
                    col['title'] = jsonObj[i].FieldText;
                    col['field'] = jsonObj[i].FieldValue;
                    col['editor'] = jsonObj[i].Editor; //TODO，启用编辑
                    col['width'] = 100;
                    col['align'] = 'center'
                    col['hidden'] = jsonObj[i].Hidden;

                    //把这个对象添加到列集合中
                    columnsAll.push(col);
                }                
                //重新加载表格
                $('#dgno').datagrid({
                    height: 500,
                    url: '',
                    fit: true, //自动大小
                    singleSelect: true, //单行选取
                    method: 'get',
                    columns: [columnsAll], //要显示的列
                    //onClickRow: onClickRow, //单击事件                
                }).datagrid('loadData', { total: 0, rows: [] });
            }
        }
    });
}

      

    图中是实现的效果

    

     接下来就是要实现动态加载数据，由于一条数据是由数据库中多条记录来拼接实现的，接下来来详细介绍如何将数据动态添加行，让数据能够准确的显示到界面上。。。