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

整体页面分三部分搭建

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

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

(1).表头的按钮

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

 添加
 修改
 删除 
 查询

(2).表头的查询窗口

 
 
 
 
   

     编号
   
 
   
 
     
 
   
 权限 
  
 
  
 
    
  
 
 







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

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

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

 
 提交
 取消 

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

//点击添加按钮执行 
 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请求