easyui管理系统模板.doc

easyui管理系统模板 篇一：MVCEasyui后台代码详解 Jquery-easyui后台界面代码简介 对于一个完整的页面的实现，往往体现了前台与后台的交互，前台用户发出请求，在后台进行相应的处理，将所请求的内容返回到前台，进行展示给用户界面。 首先，我们来看看前台，页面的显示我们是在静态页面中定义div来显示表格数据的显示位置，其代码如下： lt;div id=toolbar@*工具栏*@ lt;a *@ lt;a href=# class=easyui-linkbutton data-options=iconCls:#39;icon-edit#39;,plain:true onclick=CreateDialog()新建lt;/a@*新建按钮 lt;/div lt;div id=datagridlt;/div@*表格显示所在的div*@ href=# class=easyui-linkbutton data-options=iconCls:#39;icon-reload#39;,plain:true onclick=refresh()刷新lt;/a刷新按钮 在上面的代码中，我们定义div（datagrid），我们会在js代码中来实现，easyui实际是jquery来操作的，代码如下： $(#39;#datagrid#39;).datagrid({ title: #39;学生信息#39;,//datagrid的标题 toolbar: #39;#toolbar#39;,//定义工具栏 url: #39;/Student/datagrid#39;,//像后台控制器请求的地址 method: #39;post#39;,//数据传递的方式 pagination: true,//是否分页 pageSize: 5, //分页大小 pageList: [5, 10, 15, 20], //每页的个数 singleSelect: true,//是否单选 rownumbers: true,//显示行标 nowrap: false,//表格中的文字是否换行 fitColumns: false,//是否适应表格的宽度 columns: [[//配置列属性 { field: #39;Sno#39;, title: #39;学号#39;, width: 100 }, { field: #39;Sname#39;, title: #39;姓名#39;, width: 100 }, { field: #39;Ssex#39;, title: #39;性别#39;, width: 100, formatter: sexFormat },{ field: #39;Sage#39;, title: #39;年龄#39;, width: 100 }, { field: #39;Remark#39;, title: #39;备注#39;, width: 200 }, { field: #39;edit#39;, title: #39;操作#39;, width: 400, formatter: editFormat }]] }); function sexFormat(value, rows) {//自定义表格显示列 if (rows.Ssex == true) { value = 男; return value; } else { return 女; } }在这段代码中，我们首先定义一个dategrid(数据绑定表格)，然后配置表格的基本属性(地址，传值方式以及列属性等)详情见注释； 然后我们来看看后台代码，在前面的代码中有段代码：url：/Student/datagrid，这就找到了后台与前台交互的控制器的位置，在后台中我们主要做的是返回数据，由于所传的值有两个（total，rows）这就需要一个json格式数据将二者打包的变量返给前台，代码如下 [HttpPost] public JsonResult datagrid(int page,int rows)//后台所对应的路径 { int totalCount;//数据库中存在数据的总数 var list = studentserver.GetPagedStudents(page, rows, out totalCount);//调用了一个分页函数（使数据分页显示） var jsonObject = new { total = totalCount,//数据总数 rows = list.Select(i = new //数据解析 { Sno = i.Sno, Sname = i.Sname, Ss