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

代码篇——DataGrid相关推荐

爬虫python代码广告_零基础掌握百度地图兴趣点获取POI爬虫（python语言爬取）（代码篇）...
我是怎么想的,在新浪博客里写代码教程. 这篇博客的内容同步到了CSND博客中,那里不限制外链,也可以复制代码. http://blog.csdn.net/sinat_41310868/article/ ...
js字符串(String)转多维数组(Array) - 代码篇
js字符串(String)转多维数组(Array) - 代码篇 Demo代码: <!DOCTYPE html> <html> <head> <meta cha ...
＜img src=“图片引用失败“ onerror=“自动替换默认图片“＞ - 代码篇
img图片引用失败,自动替换默认图片(半句代码搞定) 图片引用失败,显示默认图片:  <img src="图片引用失败" onerro ...
判断域名来源的操作【window.location.host.indexOf(‘域名关键词‘)】 - 代码篇
文章目录判断域名来源的操作 - 代码篇代码如下: 判断域名来源的操作 - 代码篇代码如下: // 判断域名的操作:如果域名是qblog 或qdownload,则为true: var flagBo ...
bootstrapV4.6.0实现标签页（改造v3.3.7）- 代码篇
文章目录疑问 · 注意事项: 效果图: 全部代码示下: 疑问 · 注意事项: 本案例中bootstrap.css.js使用的是4.6.0版本: 网上说4.0+版本的没有"标签页" ...
js时间对象：获取当前时间（格式化）- 代码篇
js获取当前时间(格式化)- 代码篇两种方式: Vue.prototype.method1 = function (){ var currentTime = new Date();var YY,MM
前端发送http的get请求 - 代码篇
前端html发送http GET请求(含案例 .含代码) 资料文献地址: 资料文献 . jQuery.get().jQuery.post() 分类:快捷方法案例 · 代码: <!DOCTYPE ...
vue应用axios.get请求的代码格式（2种）- 代码篇
vue应用axios.get请求的代码格式(2种)- 代码篇代码: axios.get(this.serverPath+'/supermarket/fruits/options?id='+id, { ...
confirm + if 逻辑判断 -代码篇
confirm + if 逻辑判断 -代码篇代码示下: if(confirm("去看看?")){window.location.href="/"; } 以上就 ...

代码篇——DataGrid

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

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

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

四：foreach加载表格内容

代码篇——DataGrid相关推荐

最新文章

热门文章