代码篇——DataGrid

来源：互联网发布：药店时空软件官网编辑：程序博客网时间：2024/06/06 12:54

一：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。。。

2 0