使用easyui搭建前台页面实现基本的增删改查的基本操作

整体页面分三部分搭建

1. 表格的编写 $('#listTable').datagrid（{}）

1>.表格的头 toolbar："#id"

(1).表头的按钮

@*plain设置简单属性让按钮扁平化*@ 

 <a class="easyui-linkbutton" data-options="iconCls:'icon-add',width:70,plain:true" onclick="add()">添加</a>
 <a class="easyui-linkbutton" data-options="iconCls:'icon-edit',width:70,plain:true" onclick="edit()">修改</a>
 <a class="easyui-linkbutton" data-options="iconCls:'icon-clear',width:70,plain:true" onclick="del()">删除</a> 
 <a class="easyui-linkbutton" data-options="iconCls:'icon-search',width:70,plain:true" onclick="select()">查询</a>

(2).表头的查询窗口

<table id="TopTable_botton" style="padding:0;margin:0"> 
 <tr> 
   <td>
     <label for="ID">编号</label>
   </td> 
   <td> 
    <input type="text" placeholder="请输入编号" name="ID" id="ID" /> </td> 
   <td> <label for="Name">权限</label> 
  </td> 
  <td> 
   <input type="text" placeholder="请 
   输入权限" name="Name" id="Name" /> 
  </td> 

 </tr> 

</table>

2>.数据网格

columns:[
   [ 
         { checkbox: true, field: "kk" }, { field: 'ID', title: '编号', width: 100 },
      { field: 'Name', title: '菜单名称', width: 100 },
    ]
]

3>.底部分页

//是否开启分页功能

 pagination: true, //初始化页码 
 pageNumber: 1,  //没页显示条数 
 pageSize: 15, //设置每页显示条数的容器 
 pageList: [5, 8, 10, 15], modal: true//设置模块化选择窗体时其他不会被选中

2. 弹出窗口的实现

$('#formdialog').dialog({ 
 width: 400, height: 400, title: '添加', closed: true,//默认情况下关闭
 //设置底部的2个按钮 
 buttons: '#btns', });

1>.头部的窗体是异步表单$('#formdialog').dialog

<div id="formdialog">
 @*添加一个异步表单*@
 @using (Ajax.BeginForm(new AjaxOptions() {
 Confirm = "确定要执行吗?",//弹出消息框
 HttpMethod = "Post",//提交表单类型 
 OnSuccess = "success",
//接收后台返回的json值 
 OnBegin = "begion"//设置页面跟新前调用的函数进度条的加载 
 })) 
 { 
 @Html.HiddenFor(x => x.ID); 
 <table class="gridtable"> 
 <tr> 
 <td>角色</td> 
 <td> @*<input name="Name" type="text" />*@ 
 @*根据实体属性生成文本框*@ 
 @Html.TextBoxFor(x => x.Name) </td> 
 <td> @*如果异常显示提示信息*@ 
 <span style="color:red;height:30px;width:200px"> @Html.ValidationMessageFor(x => x.Name)</span> </td> </tr> 
 </table> 
 } 
 </div>

1>.底部的按钮 buttons: '#btns',

<div id="btns"> 
 <a class="easyui-linkbutton" data-options="iconCls:'icon-ok',width:70,plain:true" onclick="saves()">提交</a>
 <a class="easyui-linkbutton" data-options="iconCls:'icon-undo',width:70,plain:true" onclick="undo()">取消</a> </div>

按钮的执行逻辑事件及异步表单的事件

//点击添加按钮执行 
 function add() { } 
 //点击修改按钮执行
 function edit() { } 
 //点击删除按钮执行
 function del() { }
 //点击查询按钮执行
 function select() { } 
 //构造查询的参数
 function initQuery() { } 
 //接收后台返回数据执行 
 function success(data) { } 
 //点击提交执行 
 function saves() { }
 //点击取消执行 
 function undo() { } 
 //加载进度条的方法 
 function begion() { }

页面执行的基本流程

1.访问控制器的index页面执行分页方法(如果有数据需要在这里将数据加载完成如selectlist)

2.表格的 $('#listTable').datagrid中的url: "/Role/List",会向"/Role/List"发起一个post请求传递的参数为page//第几页, rows//行数返回数据填充表格

3.执行添加操作

1>.点击添加按钮 （1）.修改title（2）.清空表单数据（3）.修改action提交路径 （4）.打开窗体

function add() { 
 //点击清空 
 $('#formdialog form').form("reset"); 
 //修改窗体的title 
 $('#formdialog').dialog("setTitle", "添加"); 
 $('#formdialog form').attr("action", "@Url.Action("Add","Role")");//修改 $('#formdialog form')的action

//点击添加时显示 

$('#formdialog').dialog("open"); 

}

2>.执行提交事件 $('#formdialog form').submit();//执行提交

2.执行修改操作

1>.选中修改项点击修改按钮 （1）.修改title（2）.清空表单数据（3）.修改action提交路径

（4）.获取被选中的按钮数据 var ifChecked = $('#listTable').datagrid("getChecked");//返回被选中行的所有数据

（5）.判断选中行数提示

if (ifChecked.length != 1) {
//判断选中条数 
 $.messager.alert('提示', '只能选中一行!', 'info'); 
 return; 
 }

（6）访问/Role/Update/获取数据 $('#formdialog form').form("load", "/Role/Update/" + id);//向后台发送一个get请求返回数据填充表单

function edit() { 
 $('#formdialog form').form("reset");//重置form表单使其为数据空 
 var ifChecked = $('#listTable').datagrid("getChecked");//返回被选中行的所有数据 
 if (ifChecked.length != 1) {
//判断选中条数 
 $.messager.alert('提示', '只能选中一行!', 'info');
 return;
 } var id = ifChecked[0].ID;//提取选中行的ID 
 //加载记录来填充表单
 $('#formdialog form').form("load", "/Role/Update/" + id);//向后台发送一个get请求返回数据填充表单 
$('#formdialog').dialog("open");
 $('#formdialog').dialog("setTitle", "修改");//修改窗体的title
 $('#formdialog form').attr("action", "/Role/Update/"); //修改 $('#formdialog form')的action
 }

2>.执行提交事件 $('#formdialog form').submit();//执行提交

3.删除执行（1）选中删除项 （2）点击删除按钮

（3）.获取被选中的按钮数据 var ifChecked = $('#listTable').datagrid("getChecked");//返回被选中行的所有数据

###（4）.判断选中行数提示

if (ifChecked.length == 0) {
//判断选中条数 
 $.messager.alert('提示', '请选择!', 'info'); 
 return;
 } 
 var ids = [];//提取选中行的ID 
 for (var i = 0; i < ifChecked.length; i++) 
{ 
 ids.push(ifChecked[i].ID); 
 } 
 var _ids = ids.join(',');

(5)访问/Role/Del/提交表单得到结果

$.ajax({
 url: '/Role/Del', 
 type: 'post', datatype: 'json', 
 data: { ids: _ids }, 
 Begin: function () { 
 begion(); 
 },
 success: function (data) { 
 success(data); 
 } 
 });

4.查询操作

（1）点击查询（2）获取文本框数据

function initQuery() {
 var queryParams = { 
 ID: $('#txtID').val(), 
 Name: $('#txtName').val() //需要查询的对象 
 };
 return queryParams;
 }

(3)提交表单 $("#listTable").datagrid("load", initQuery());

精华总结

1.提交表单方法

(1)表格内： url: "/Role/List",会向"/Role/List"发起一个post请求传递的参数为page//第几页, rows//行数返回数据填充表格

(2)表单提交： $('#formdialog form').submit();//执行提交

(3)外部更具路径提交get请求： $('#formdialog form').form("load", "/Role/Update/" + id);

(4)外部更具表格提交post请求： $("#listTable").datagrid("load", {ID:1,name:'aaa'})；执行的是$("#listTable")的url请求