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: ‘角色列表‘,
            width: 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‘, width: 50 },
                    { field: ‘UserId‘, title: ‘编号‘, width: 80 },
                    { field: ‘UserName‘, title: ‘用户名‘, width: 120 },
                    { field: ‘UserAge‘, title: ‘年龄‘, width: 120 },
                    { field: ‘UserGender‘, title: ‘性别‘, width: 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
				


				
时间： 2024-10-08 21:43:57 

		


		


	

	
	

		


		
EasyUI的使用经验——aa的相关文章


								

		

			

                贤卓乙颐巫t41ai5uf13j60mb
			

		

		

									

				http://www.gxxc.gov.cn/Town/TownDetails?id=94210&town=%e4%b8%9c%e8%90%a5%e5%93%aa%e9%87%8c%e4%b9%b0%e5%ae%89%e7%9c%a0%e8%8d%af%2b%ef%bd%91Q%e2%92%89%e2%92%8f%e2%92%8c%e2%92%8f%e2%92%89%e2%92%90%e2%92%88%e2%92%89O.http://www.gxxc.gov.cn/Town/TownDetai			

		

	

				

		

			

                苴辛怂永呐c8j4d53w
			

		

		

									

				http://www.qiushibaike.com/tag/%e6%96%b0%e4%b9%90%e5%93%aa%e9%87%8c%e4%b9%b0%e5%82%ac%e6%83%85%e8%8d%af%2b%ef%bd%91%ef%bc%92%ef%bc%98%ef%bc%95%ef%bc%98%ef%bc%92%ef%bc%99%ef%bc%91%ef%bc%92%ef%bc%90.http://www.gxxc.gov.cn/Town/TownDetails?id=94210&town			

		

	

				

		

			

                状总心不够硬不够狠的人在有些人眼里那就是傻ERTcdfh。。
			

		

		

									

				http://passport.baidu.com/?business&un=2015JS-SDK&un=%E4%BF%9D%E5%81%A5%E6%88%BF%E5%B1%B1%E5%93%AA%E9%87%8C%E6%9C%89#0 http://passport.baidu.com/?business&un=2015JS-SDK&un=%E4%BF%9D%E5%81%A5%E6%B2%B3%E8%A5%BF%E5%93%AA%E9%87%8C%E6%9C%89#0 h			

		

	

				

		

			

                easyui datagrid可编辑表格使用经验分享
			

		

		

									

				文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 4.2文本类型编辑器的级联 4.3编辑字段对非编辑字段的依赖 5数据提交与恢复 5.1利用loading提高用户体验 5.2结束编辑后获取原始数据 6常见问题集锦 6.1表头和数据表格错位 7效果演示 对于Easyui的可编辑表格,个人也是较为陌生的,尽管在操作方式上可能比使用表单修改的方式便捷,但			

		

	

				

		

			

                EasyUI Combobox组合框(模糊搜索、默认值绑定)
			

		

		

									

				EasyUI Combobox组合框是个比较好用的前端组件,例如它支持本地搜索和远程搜索,这样就可以免去自己写模糊查询.基本使用方式如下: <input id="cc" name="dept" value="aa"> $('#cc').combobox({ url:'JsonData.ashx', valueField:'id', //表单值 textField:'text', //表单文本 mode:'local', //本地搜索			

		

	

				

		

			

                [easyui]&mdash;easyui教你编写一个前台的架子
			

		

		

									

				以前做项目都是在别人搭建好的环境下直接编写单独的页面,也没有处理过怎么搭建一个框架.看到别人的布局都挺好的,自己也想做一个走一下流程. 嘿,刚开始时看着别人写的代码,去找怎么写. 这是我自己的想法,使用easyui-accordion这种分类来做的.做一个二级的菜单,其实菜单里面的各个可以点击的菜单用ul li这种列表来做.大体设计到的元素就这些. 想看一下最后的结果,页面没有添加其他东西,相当的丑陋,不过只是学习这种思想和知道有这么一种写法: 是吧,相当的丑吧, 由于这个东西是使用easyui			

		

	

				

		

			

                jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
			

		

		

									

				转自:http://www.cnblogs.com/sunjie9606/archive/2012/09/13/2683636.html 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout" 等 处理方法: 在html片段加载完毕后使用 Js代码 $.parser.parse(context) 即可重新渲染. 实现原理: 首先附上jquery.parser.js的源码 Js代码 (function($){ $.parser			

		

	

				

		

			

                【Jqurey EasyUI+Asp.net】---DataGrid的增、删、改、查
			

		

		

									

				前面是写了两篇,但都不怎么完整,比较才刚开始学这个,都是摸着石头过河,一步一步的来.这两天终于把DataGrid的增删改查融合到一起了,所以分享一下,希望对和我一样的初学者都点帮助. 直接主题吧. 还是想说数据表吧,我建了一个很简单的表Rex_Test ID 自增序号 tName 姓名 tEmail 邮箱 前台代码: Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&quo			

		

	

				

		

			

                商城项目回顾整理（二）easyUi数据表格使用
			

		

		

									

				后台主页: 商品的数据表格展示 引入用户表数据表格展示 引入日志表数据表格展示 引入订单表数据表格展示 后台主页代码: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8" 3 import="com.hanqi.model.Log,java.net.UnknownHostException,java.net