easyUI对列表的增、删、改、查例子。

原创 2015年11月19日 17:08:03

列表前端:

<body class="easyui-layout">
    <div data-options="region:'north',border:false,iconCls:'icon-search',hideCollapsedContent:false" title="查询" style="padding:10px; height:80px;">
        <div>
            <form id="form1">
                <label for="txtSerachName">姓名:</label>
                @*<input type="text" id="build_path" name="[Equal]build_path" />*@  
                @Html.TextBox("UserName").ForSearch(QueryMethod.Contains)
                <a href="#" class="easyui-linkbutton" iconcls="icon-search" id="btnSerach" name="btnSerach">搜索</a>
            </form>
        </div>
    </div>
    <div id="List" data-options="region:'center'"></div>
    <div id="edit-window" title="编辑/添加" style="width: 600px; height: 400px; padding: 5px;">
    </div>
</body>

<script type="text/javascript">
    var grid;
    $(function () {
        initTable();
    });

    //初始化列表
    function initTable(queryData) {
        grid = $('#List').datagrid({
            title: "管理列表",
            url: '/admin/SYManager/list',
            width: 'auto',
            methord: 'post',
            height: 'auto',
            fitColumns: true,
            //sortName: 'id',
            //sortOrder: 'desc',
            idField: 'Id',
            pageSize: 15,
            pageList: [15, 20, 30, 40, 50],
            pagination: true,
            striped: true, //奇偶行是否区分
            singleSelect: true,//单选模式
            loadMsg: "Loading...",
            rownumbers: true,
            columns: [[
                { field: 'UserName', title: '账号', width: 100 },
                { field: 'RealName', title: '真实姓名', width: 200 },
                { field: 'Telephone', title: '手机号', width: 120 },
                {
                    field: 'UpdateTime', title: '操作时间', width: 140,
                    formatter: function (value) {
                        return FormatTime(value, "yyyy-MM-dd hh:mm:ss");
                    }
                },
                { field: 'EmailForm', title: '发件人邮箱地址', width: 200 },
                {
                    field: 'Status', title: '状态', width: 80,
                    formatter: function (value) {
                        if (value == 1) return "启用";
                        else if (value == 0) return "未启用";
                        else if (value == -1) return "删除";
                    }
                }
            ]],
            toolbar: [{
                id: 'btnadd',
                text: '添加用户',
                iconCls: 'icon-add',
                handler: function () {
                    //实现弹出添加用户信息的层
                    Add(0);
                }
            }, '-', {
                id: 'btncut',
                text: '修改用户',
                iconCls: 'icon-cut',
                handler: function () {
                    //实现弹出修改用户信息的层
                    Edit(0);
                }
            }, '-', {
                id: 'btnsave',
                text: '删除用户',
                iconCls: 'icon-remove',
                handler: function () {
                    //确认只删除一条用户信息
                    DeleteUserInfoByClick();
                }
            }]

        });
    }

    //添加信息
    function Add(parentID) {
        dialogWin = openDialog("#edit-window", "添加用户", "Add", "icon-add").dialog('open');
        return false;
    }

    //编辑信息
    function Edit(id) {
        var idArray = getSelectedArr(id);
        if (idArray.length == 0) {
            Msgfade("请选择一条记录进行操作!");
            return;
        }
        else if (idArray.length > 1) {
            Msgfade('只能选择一条记录进行修改!');
            return;
        }
        else {
            dialogWin = openDialog("#edit-window", "修改信息", "Edit?Id=" + idArray.join(','), "icon-edit").dialog('open');
        }
        return false;
    }

    function getSelectedArr(id) {
        var ids = [];
        var rows = grid.datagrid('getSelections');
        if (id == 0) {
            for (var i = 0; i < rows.length; i++) {
                ids.push(rows[i].Id);
            }
        }
        else {
            ids.push(id);
        }
        return ids;
    }

    //关闭编辑窗口并刷新列表
    function close() {
        dialogWin.dialog('close');
        refreshGrid();
    }
    //关闭编辑窗口
    function cancel() {
        dialogWin.dialog('close');
    }
    //刷新列表
    function refreshGrid() {
        grid.datagrid('reload');
        grid.datagrid('clearSelections');
    }
</script>

@*operation*@
<script type="text/javascript">
    $("#btnSerach").click(function () {
        grid.datagrid('options').queryParams = $("#form1").serializeJson();
        grid.datagrid("load");
        return false;
    });
</script>

添加前端:

@model TMS.Model.sy_Manager
@section Scripts{
    @Html.Partial("~/Areas/Admin/Views/Shared/_Layout_Base_Edit.cshtml");
}
<body class="easyui-layout">
    <div data-options="region:'center',border:true">
        @using (Html.BeginForm("Save", ViewContext.RouteData.Values["controller"].ToString(), FormMethod.Post, new { ID = "EditForm", name = "EditForm", style = "width:100%;height:100%;" }))
        {
            @Html.AntiForgeryToken()
            @Html.HiddenFor(m => m.Id)
            @Html.Hidden("SelectdRole")
            <div class="easyui-tabs" data-options="border:false,plain:true">
                <div title="基本属性" class="tab-content">
                    <dl>
                        <dt>用户名</dt>
                        <dd>
                            @Html.TextBoxFor(m => m.UserName, new { @class = "easyui-textbox", @required = "true" })
                        </dd>
                    </dl>
                    <dl>
                        <dt>密码</dt>
                        <dd>@Html.PasswordFor(m => m.Password, new { @class = "easyui-textbox", @required = "true", @value = Model.Password })</dd>
                    </dl>
                    <dl>
                        <dt>真实姓名</dt>
                        <dd>@Html.TextBoxFor(m => m.RealName, new { @class = "easyui-textbox" })</dd>
                    </dl>
                    <dl>
                        <dt>手机</dt>
                        <dd>@Html.TextBoxFor(m => m.Telephone, new { @class = "easyui-textbox" })</dd>
                    </dl>
                    <dl>
                        <dt> 发件人邮箱地址:</dt>
                        <dd>
                            @Html.TextBoxFor(m => m.EmailForm, new { @class = "easyui-textbox", @validtype = "email", @required = "true", @missingMessage = "不能为空", @invalidMessage = "邮箱格式不正确" })
                            <span class="alertright" id="email"></span>
                        </dd>
                    </dl><dl>
                        <dt>状态</dt>
                        <dd>
                            @Html.DropDownListFor(m => m.Status, new List<SelectListItem>{
                           (new SelectListItem(){Text="启用",Value="1"}),
                           (new SelectListItem(){Text="未使用",Value="0"}),
                           (new SelectListItem(){Text="删除",Value="-1"})}, new { @class = "easyui-combobox", data_options = "editable:false,panelHeight:'auto'", style = "width:150px;" })
                        </dd>
                    </dl>
                </div>
              
            </div>
        }
    </div>
    <div data-options="region:'south',border:false" style="text-align:center">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="return Save();" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="return window.parent.close();" style="width:90px">Cancel</a>
    </div>
    <script type="text/javascript">
        function Save() {
            var nodes = $('#roleSet').tree('getChecked');
            var s = '';
            for (var i = 0; i < nodes.length; i++) {
                if (s != '') s += ',';
                s += nodes[i].id;
            }
            $("#SelectdRole").val(s);
            btnSave();
        }
    </script>
</body>




后台:需要引用命名空间 

using Microsoft.Practices.Unity;
using System.Web.Mvc;
using System.Collections.Generic;
using System.EnterpriseServices;

列表:

public ActionResult List(QueryModel query)
        {
            if (Request.IsAjaxRequest())
            {
                query.PageIndex = Request["page"].DefaultIsNullOrEmpty(1);
                query.PageSize = Request["rows"].DefaultIsNullOrEmpty(2);
                query.Items.Add(new ConditionItem("Status", QueryMethod.NotEqual, -1));             
                var pagelist = service.FindAllByPage(query, p => p.UpdateTime);
                var easyUIPages = new Dictionary<string, object>();
                easyUIPages.Add("total", pagelist.TotalItemCount);
                easyUIPages.Add("rows", pagelist);

                return Json(easyUIPages, JsonRequestBehavior.AllowGet);
            }
            else
                return View();
        }
增加:

 public ActionResult Add()
        {
            ViewData.Model = new sy_Manager();
            return View(viewPath + "Edit.cshtml");
        }

修改:

   [Description("修改")]
        public ActionResult Edit(int id)
        {
            ViewData.Model = service.Find(id);
            return View(viewPath + "Edit.cshtml");
        }

保存:

 [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Save(sy_Manager formModel)
        {
            var result = false;
            var message = string.Empty;
            try
            {
                if (ModelState.IsValid)
                {
                    var selectedRole = Request["SelectdRole"].DefaultIsNullOrEmpty(string.Empty);
                    
                    if (formModel.Id != 0)
                    {
                        var model = service.Find(formModel.Id);
                        UpdateModel<sy_Manager>(model);
                        model.Password = Encrypt.MD5(model.Password);
                        model.UpdateTime = model.CreateTime = DateTime.Now;
                        service.Update(model);
                        message = "更新成功";
                    }
                    else
                    {
                        formModel.Password = Encrypt.MD5(formModel.Password);
                        formModel.UpdateUser = formModel.CreateUser = "admin";
                        formModel.UpdateTime = formModel.CreateTime = DateTime.Now;
                        service.Add(formModel);
                        message = "新增成功";
                    }                   
                    result = true;
                }
            }
            catch (Exception e)
            {
                result = false;
                message = "系统发生错误,请联系管理员";
                ModelState.AddModelError("", e.Message);
            }
            message += ModelStateExtensions.ExpendErrors(this);
            return Json(new { success = result, message = message }, JsonRequestBehavior.AllowGet);
        }

删除:

 public ActionResult Delete(string data)
        {
            string[] Ids = string.IsNullOrEmpty(data) ? new string[] { } : data.Split(',');
            int Id = -1;
            var result = false;
            var message = string.Empty;
            try
            {
                foreach (string str in Ids)
                {
                    if (int.TryParse(str, out Id)) //如果Id可以转换成int型
                    {
                        var model = service.Find(Id);
                        if (model != null)//如果model存在
                        {
                            UpdateModel<SmtpInfo>(model);
                            model.UpdateTime = DateTime.Now;
                            model.UpdateUser = "Admin";
                            model.Status = -1;
                            service.Update(model);
                            message = "删除成功";
                        }
                    }
                }
            }
            catch (Exception e)
            {                
                result = false;
                message = "系统发生错误,请联系管理员";
                ModelState.AddModelError("", e.Message);
            }
            message += ModelStateExtensions.ExpendErrors(this);
            return Json(new { success = result, message = message }, JsonRequestBehavior.AllowGet);
        }



使用easyui实现列表的批量删除

使用easyui实现列表的批量删除 首先要做的就是增加一个多选框 //就是这个,多选框 在列表的配置选项中 增加一个 singleSelect:false, 把true改为false  ...
  • shipeng22022
  • shipeng22022
  • 2014年04月21日 10:30
  • 16374

EasyUI----DataGrid行明细增删改操作

本文实现的是EasyUI-DataGrid行明细的增删改操作。具体参考来自以下文章: 官方DEMO---- DataGrid ---- Master Detail 在easyui中...
  • huchiwei
  • huchiwei
  • 2012年07月26日 11:35
  • 35495

easyUI datagrid列表里面显示图片并预览的实现方法

想要在easydatagrid列表里面显示图片,并实现点击预览功能,可以使用以下方法进行实现: 下面我以图片字段格式为:upload/file/aa.png,upload/file,bb.png来...
  • qq_27298687
  • qq_27298687
  • 2016年11月18日 10:14
  • 14074

easyui 弹框显示列表

jsp: .tongji_table{width:100%;text-align:left;border-collapse:collapse;border-spacing:0;border-spac...
  • wenweining
  • wenweining
  • 2017年05月23日 15:12
  • 919

easyui 列表按钮 DataGrid(数据表格)

要实现的效果图. 官方现有的demo有没有现成的.这种超链接按钮就需要我们自己去拼凑了. 需要用到easyui formatter 函数 (待更新...) My Project的实践 $("...
  • sat472291519
  • sat472291519
  • 2016年08月17日 13:32
  • 1686

net架构下c#语言中easyui实现数据展示、增删改

Row Editing in DataGrid - jQuery EasyUI Demo                         --%>     Row Editing in ...
  • jyuzhb
  • jyuzhb
  • 2016年12月20日 14:43
  • 743

EasyUI 增删改查完全详细

本实例使用EasyUI编写,涵盖eaui的各种元素的创建,验证限制,事件,ajax等
  • c657826604
  • c657826604
  • 2016年04月22日 09:52
  • 11031

使用EasyUI实现添加和删除功能

增删该查是任何一个项目都少不了的功能操作,这篇博文主要简介一下如何使用EasyUI实现添加和删除功能。         首先,导入EasyUI的js代码: ...
  • zjx86320
  • zjx86320
  • 2014年12月21日 22:12
  • 9808

使用jsp,jquery,easyUI,ssh,mysql框架完整的表格增删改,及页面布局的项目

  • 2013年03月27日 16:58
  • 13.57MB
  • 下载

使用 EasyUI+MySQL+Servlet 实现简单的 增删改查

一、前言 用过 easyui 的人都知道,它是一个很好的显示数据的框架,如 SQLyog 这种非客户人员使用的页面,是不需要追求太多的特效的页面,只需要 ①方便地对数据进行分页显示、操作 ②方便...
  • larger5
  • larger5
  • 2017年11月25日 13:38
  • 453
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyUI对列表的增、删、改、查例子。
举报原因:
原因补充:

(最多只允许输入30个字)