EasyUI的使用经验——aa

恢复

1,EasyUI的使用本来要求两个小时完成，我用了一天，路漫漫啊！

下面来看下今天的收获吧！  

主要是对EasyUI的增删改查

（1）首先是调用文件

   

 <link href="~/Content/easyUI/icon.css" rel="stylesheet" />
    <link href="~/Content/easyUI/default/easyui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

（2）然后是添加主页  

 <div>
        <table id="roleList"></table>
    </div>

  使用Jquery加载EasyUI的数据

function ShowAgain(Param) {
        $("#roleList").datagrid({
            url: '@Url.Action("GetPageList","EasyUI2")',
            title: '角色列表',
             700,
            height: 400,
            fitColumns: true,
            idField: 'UserId',
            loadMsg: '正在加载角色的信息...',
            pagination: true,
            singleSelect: false,
            pageSize: 10,
            pageNumber: 1,
            pageList: [10, 20, 30],
            queryParams: Param,
            columns: [[
                    { field: 'ck', checkbox: true, align: 'left',  50 },
                    { field: 'UserId', title: '编号',  80 },
                    { field: 'UserName', title: '用户名',  120 },
                    { field: 'UserAge', title: '年龄',  120 },
                    { field: 'UserGender', title: '性别',  120 }
            ]],
            toolbar: [{
                id: 'toolbarAdd',
                text: '添加',
                iconCls: 'icon-add',
                handler: AddShow
            }, {
                id: 'toolbarEdit',
                text: '修改',
                iconCls: 'icon-edit',
                handler: EditShow
            },
            {
                id: 'toolbarEdit',
                text: '删除',
                iconCls: 'icon-remove',
                handler: DeleteShow
            }]
        });

编写服务端的程序：

public ActionResult GetPageList(int rows,int page)
        {
            string Name=Request["Name"];
            int id1 = string.IsNullOrEmpty(Request["Id"]) ? 0 : Int32.Parse(Request["Id"]);
            int total;
            var result = bll.GetPageList<int>(u=>(true)&&
                (string.IsNullOrEmpty(Name) ? true:u.UserName.Contains(Name))
                &&
                (id1==0 ? true : u.UserId == id1)
                ,u=>u.UserId,rows,page,out total);
            return Json(new {total,rows=result},JsonRequestBehavior.AllowGet);
        }

注意：
GetPageList(int rows,int page)；EasyUI的需要几个参数，total, 其返回的数据是要求这样的格式{total：''，rows：[{},{}]} 

所以要这样写return Json(new {total,rows=result},JsonRequestBehavior.AllowGet);

其发起的请求是要以上面的格式接受请求。

Id,和后面的u=>(true)&&
                (string.IsNullOrEmpty(Name) ? true:u.UserName.Contains(Name))
                &&
                (id1==0 ? true : u.UserId == id1)是用来查询用的。后面会介绍。

二,增

（1）书写html语句

   <div id="AddList">
        
        @using (Ajax.BeginForm("Add", "EasyUI2", new AjaxOptions() { 
        OnSuccess="AddAfter"
        }))
        {
            <table border="1">
                <tr>
                    <td>姓名：</td>
                    <td>@Html.TextBoxFor(r => r.UserName)</td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>@Html.TextBoxFor(r=>r.UserGender)</td>
                </tr>
                <tr>
                    <td>年龄：</td>
                    <td>@Html.TextBoxFor(r => r.UserAge)</td>
                </tr>
            </table>
        }
    </div>

JQuery在一开始是要先隐藏数据。
$("#AddList").hide();

 当点击时变成显示，并调用函数

function AddShow() {
        $("#AddList").show();
        $("#AddList").dialog({
            title: "添加用户",
            collapsible: true,
            minimizable: true,
            maximizable: true,
            resizable: true,
            buttons: [{
                text: "添加",
                iconCls: "icon-add",
                handler: function () {
                    $("#AddList form").submit();
                }
            }, {
                text: "取消",
                iconCls: "icon-cancel",
                handler: function () {
                    $("#AddList").dialog("close");
                }
            }]
        });

    }

（2）书写服务器端程序

        public ActionResult Add(UserInfo model)
        {
         
            bool boo= bll.Add(model);
            return Content(boo.ToString());
        }

（3）添加完成是更新

function AddAfter(msg)
    {
        if (msg == "True") {
            $('#roleList').datagrid('reload');
            $("#AddList").dialog("close");
        }
        else {
            $("#AddList").dialog("close");
            alert("添加失败！");
        }
    }

三，删除

（1）编写Jquery

function DeleteShow() {
        var items = ''; 
        var id = '';
        items = $('#roleList').datagrid('getSelections');
        $.each(items, function (i, item) {
            id += item['UserId'] + ',';
        });
        $.messager.confirm('提示', '确定要删除吗？', function(msg) {
            id = id.substring(0, id.length - 1);
            $.post("EasyUI2/Delete?a="+Date().toString(), { idList: id}, function (msg) {
                if (msg == "True") {
                    location.reload();
                    id = '';
                } else {
                    alert("删除失败！");
                }
            })  
        })
    }

(1)首先调用getSelections方法获取所有的选中项

（2）根据获取的数据组合成数组并发送到服务器

（3）编写服务器代码

        public ActionResult Delete(string idList)
        {
            bool boo=false;
            //idList
            List<int> list = new List<int>();
            string[] ids = idList.Split(',');
           
            foreach (var id in ids)
            {
                list.Add(int.Parse(id));
            }
            boo = bll.DelByIds(list.ToArray());
           return Content(boo.ToString());
        }

 服务器的底层是用OA写的。DelByIds是这么写的

 public bool DelByIds(int[] id)
        {
            int a = 0;

            for (int i = 0; i < id.Length; i++)
            {
              bool boo= DelById(id[i]);
              if (boo) a++;
            }
            if (a != id.Length) return false ;
            return true;
        }

四，改

html

 <!--修改-->
    <div id="Edit">
        <iframe src="#"></iframe>
    </div>

jquery
注意：一开始时也要隐藏，点击时显示

  function EditShow() {
        $("#Edit").show();
        var items = $('#roleList').datagrid('getSelections');//获取选择的项目，当大于1时提示用户
        if (items.length != 1) {
            $.messager.alert('警告', "请选择一条要修改的记录");
            return;
        }
        var id = items[0]["UserId"];

        //修改src属性，指向修改页面
        $('#Edit iframe').attr("src", '@Url.Action("Edit","EasyUI2")?id1=' + id);
        $("#Edit").dialog({
            title: "修改用户",
            collapsible: true,
            minimizable: true,
            maximizable: true,
            resizable: true,

            buttons: [{
                text: "修改",
                iconCls: "icon-edit",
                handler: function () {
                    $('#Edit iframe')[0].contentWindow.EditSubmit();
                }
            }, {
                text: "取消",
                iconCls: "icon-cancel",
                handler: function () {
                    $("#Edit").dialog("close");
                }
            }]
        });
    }

这段程序的关键是前面的调用获取选择的项目，

还有就是后面的调用点击修改时 $('#Edit iframe')[0].contentWindow.EditSubmit();调用Edit页面中的Jquery函数EditSubmit();

（2）Edit页面

@model Model.UserInfo
@{
    ViewBag.Title = "Edit";
}
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<link href="~/Content/easyUI/default/tabs.css" rel="stylesheet" />
<link href="~/Content/easyUI/default/easyui.css" rel="stylesheet" />
<link href="~/Content/easyUI/icon.css" rel="stylesheet" />
<script>
    function EditSubmit() {
        $('form').submit();
    }
    function EditAfter(msg) {
        window.parent.EditAfter(msg);
    }
</script>
<h2>Edit</h2>
@using (Ajax.BeginForm("Edit", "EasyUI2", new AjaxOptions()
{
    OnSuccess = "EditAfter"
}))
{
    <table border="1">
        <tr>
            <td>编号：</td>
            <td>@Html.TextBoxFor(u => u.UserId)</td>
        </tr>
        <tr>
            <td>姓名：</td>
            <td >@Html.TextBoxFor(u=>u.UserName)</td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>@Html.TextBoxFor(u => u.UserGender)</td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td>@Html.TextBoxFor(u => u.UserAge)</td>
        </tr>
    </table>
}

(3)服务器代码

 public ActionResult Edit()
        {
            int id= String.IsNullOrEmpty(Request["id1"])? 0:Int32.Parse(Request["id1"]);
            var result = bll.GetById(id);
            return View(result);
        }
        [HttpPost]
        public ActionResult Edit(UserInfo model)
        {
            bool boo = false;
            if (model != null)
            {
                boo = bll.Edit(model);
            }
            return Content(boo.ToString()); 
        }

第一个Edit是一开始点击修改时加载数据。
第二个是当数据修改完成时，提交修改数据。

五，查

（1）html

<!--搜索-->
    <div id="Select">
        <table border="1">
            <tr>
               <td>用户名：</td><td><input id="Name" type="text" /></td>
                <td>编号：</td><td><input id="Id" type="text" /></td>
                <td><input type="button" onclick="Select()" value="搜索" /></td>
            </tr>
        </table>
        
    </div>

使用最简单的table方式加载数据。
（2）Jquery

获取数据并传入”一“（最上面的程序），的函数中

 function Select() {
        
            //获取查询数据
            var Name1 = $("#Name").val();
            var Id1 = $("#Id").val();
            //向服务器请求
            ShowAgain({
                'Id': Id1,
                'Name': Name1
            });
            
    }

服务器：

public ActionResult GetPageList(int rows,int page)
        {
            string Name=Request["Name"];
            int id1 = string.IsNullOrEmpty(Request["Id"]) ? 0 : Int32.Parse(Request["Id"]);
            int total;
            var result = bll.GetPageList<int>(u=>(true)&&
                (string.IsNullOrEmpty(Name) ? true:u.UserName.Contains(Name))
                &&
                (id1==0 ? true : u.UserId == id1)
                ,u=>u.UserId,rows,page,out total);
            return Json(new {total,rows=result},JsonRequestBehavior.AllowGet);
        }

获取数据并根据数据查询
（4）完成之后

function SelectAfter() {
        $('#roleList').datagrid('reload');
    }

完成的属于你自己的EasyUI