代码篇——DataGrid

一：DataGrid如何绑定controller中的数据进行显示

view代码：

以下代码为easyUI，所以需要引用easyui中的js，才能正常显示。

<span style="font-size:18px;"><span style="font-size:18px;"><div id="examInfomation" style="text-align:center;margin-left:200px;">
    
                <table id="Chapter1" class="easyui-datagrid" title="考试信息" style="width:600px; height: 300px;" data-options="url:'/AddExamPlace/QueryExamPlace'", fitColumns:true >
                   <thead>
                        <tr>
                            <th data-options="field:'ck',checkbox:true"></th>
                            <th data-options="field:'ExamPlaceID',width:150">考场ID</th>
                            <th data-options="field:'ExamPlace',width:100">考场地点</th>
                            <th data-options="field:'Examiner',width:100">监考老师</th>
                            <th data-options="field:'StartTime',width:100">开始时间</th>
                            <th data-options="field:'EndTime',width:100">结束时间</th>
                        </tr>
                    </thead>   
           </table>
    </div></span></span>

Controllers中的代码：

方法一：

需要引用System.Web.Script.Serialization;

<span style="font-size:18px;"><span style="font-size:18px;"> public string QueryExamPlace()
        {

            List<ExamDetailsViewModel> queryAllExamPlace = new List<ExamDetailsViewModel>();
            queryAllExamPlace = IexamdetailsServiceBll.queryExamPlace();
            JavaScriptSerializer servializer = new JavaScriptSerializer(); // 自定义类型解析程序对象。
            var tempType = from c in queryAllExamPlace
                           select new
                           {
                               ExamPlaceID = c.ExamPlaceID,
                               ExamPlace = c.ExamPlace,
                               Examiner = c.Examiner,
                               StartTime = c.StartTime,
                               EndTime = c.EndTime,
                           };
            return servializer.Serialize(tempType); //返回序列化对象    
        }</span></span>

方法二：

<span style="font-size:18px;"><span style="font-size:18px;"> public ActionResult QueryExamPlace()
        {
            List<ExamDetailsViewModel> QueryExamPlace = IexamdetailsServiceBll.queryExamPlace(); ;

            return Json(QueryExamPlace, JsonRequestBehavior.AllowGet);
        }</span></span>

      通过页面上的一个url，来实现绑定controller中传过来的数据，忽然觉得好方便。

二：JS中创建表格，页面显示数据

View的html代码：

<span style="font-size:18px;"><span style="font-size:18px;">  <div id="examInfomation" style="text-align:center;margin-left:200px;">
    
                <table id="Chapter1" class="easyui-datagrid" title="考试信息" style="width:600px; height: 300px;" data-options="url:'/AddExamPlace/QueryExamPlace'", fitColumns:true >
                   <thead>
                       
                    </thead>   
           </table></span></span>

JS代码：

<span style="font-size:18px;"><span style="font-size:18px;">  function loadGrid() {
            //加载数据  
            $('#Chapter1').datagrid({
                width: 'auto',
                height: 300,
                striped: true,
                singleSelect: true,
                url: '/AddExamPlace/QueryExamPlace',
                loadMsg: '数据加载中请稍后……',
                pagination: true,
                rownumbers: true,

                fit: true,//自动补全  
                columns: [[
                    { field: 'ExamPlaceID', title: '考场ID', align: 'center', width:100  },
                    { field: 'Examiner', title: '监考老师', align: 'center', width:100  },
                    { field: 'StartTime', title: '结束时间', align: 'center', width:100 }
                ]]
            });
        }</span></span>

       通过JS让页面显示数据,直接在一个js中调用loadGrid()方法即可。这样的话，表格得到了重复利用。

三：怎么样在执行一个添加之后动态更新表格

        可以重新调用的表格的JS，也可以执行datagrid的reload事件   $("#Chapter1").datagrid('reload');

       

四：foreach加载表格内容

control中的代码：

<span style="font-size:18px;">  public ActionResult ExcelQuestionRecord(string papertype)
        {
            IExcelQuestionRecordService Excelquestionrecord = SpringHelper.GetObject<IExcelQuestionRecordService>("ExcelQuestionRecordService");
            papertype = "A";
            List<ExcelQuestionRecordEntity> ExcelQuestion = new List<ExcelQuestionRecordEntity>();
            //StringBuilder answeringCardHtml = new StringBuilder();
            ExcelQuestion = Excelquestionrecord.ShowExcelInformation(papertype);
            ViewData["DataList"] = ExcelQuestion;
            return View();
        }
</span>

        通过ViewData绑定了返回来的值，并传到view中。

view中的代码：

<span style="font-size:18px;">@using NCREModel;
@{
    ViewBag.Title = "ExcelQuestionRecord";
}

<h2>QuestionRecord</h2>

<div>
    <table id="tbList">
        <tr>
            <th>题号</th>
            <th>学生学号</th>
            <th>试卷类型</th>
            <th>考题内容</th>
            <th>正确答案</th>
            <th>考生答案</th>
            <th>分数</th>
            <th>时间</th>
        </tr>
        @foreach (ExcelQuestionRecordEntity a in ViewData["DataList"] as List<ExcelQuestionRecordEntity>)  
        { 
            <tr>
                 <td>@a.QuestionID</td>
                 <td>@a.StudentID</td>
                 <td>@a.PaperType</td>
                 <td>@a.QuestionContent</td>
                 <td>@a.CorrectAnswer</td>
                 <td>@a.ExamAnswer</td>
                 <td>@a.Fration</td>
                 <td>@a.TimeStamp</td>
            </tr>
        }
    </table>     
</div>

</span>

        需要在最前面引用model，这个需要注意。

    

        代码积累，多多益善。大家可以在官网上了解更多datagrid的知识。EasyUI中的Datagrid。。。