Easyui弹出框

最新推荐文章于 2024-05-11 16:34:19 发布

无盐海

最新推荐文章于 2024-05-11 16:34:19 发布

阅读量4.3k

点赞数

分类专栏： EasyUI

本文链接：https://blog.csdn.net/Fanbin168/article/details/50471336

版权

EasyUI 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

参考：jQuery & jEasyUI Extensions

参考：基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

Index视图

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>DataGrid的使用示例</title>
    <link href="~/Easyui/jquery-easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Easyui/jquery-easyui/themes/icon.css" rel="stylesheet" />
    <link href="~/Easyui/jquery-easyui/demo/demo.css" rel="stylesheet" />
    <script src="~/Easyui/jquery-easyui/jquery.min.js"></script>
    <script src="~/Easyui/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="~/Easyui/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

    <style type="text/css">
        .main {
            border-right-width: 1px;
            border-right-style: solid;
            border-right-color: #bebcbc;
            border-bottom-color: #bebcbc;
            border-bottom-style: solid;
            border-bottom-width:1px;
        }
        .description {
            width: 110Px;
            height: 36px;
            background-color: #F1F6FF;
            border: 1px solid #bebcbc;
            border-bottom-width: 0px;
            border-right-width: 0px;
            line-height: 36px;
            padding-left: 12px;
            font-family: 微软雅黑;
            float: left;
        }

            .description.content {
                background-color: #FAFCFF;
                width: 160px;
            }

        .clearFix:after {
            clear: both; /*添加清除浮动属性*/
            display: block; /*将它设为块状元素*/
            content: "."; /*这个块状元素的内容为一个 . 其实也可以不设，因为下面要隐藏掉它*/
            visibility: hidden; /*将它隐藏掉*/
            height: 0; /*将它高度设为0px*/
            line-height: 0; /*将它行高设为0px;*/
        }
    </style>

</head>

<body>
    <table id="dg"></table>

    <div id="menu" class="easyui-menu">
        <div οnclick="doAdd()">新增</div>
        <div οnclick="doEdit()">编辑</div>
        <div οnclick="doRemove()">删除</div>
    </div>


    @*closed="true" 的意思就是将这个元素隐藏起来。需要的时候用$("#DivAdd").dialog('open').dialog('setTitle', '添加信息');打开*@
    <div id="DivAdd" class="easyui-dialog" style="width:650px;height:250px;padding:10px 20px"
         closed="true" resizable="true" modal="true" data-options="iconCls: 'icon-add',buttons: '#dlg-buttons'">
        <form id="formAdd" method="post" novalidate="novalidate">
            <div  class="main">
                <div class="clearFix">
                    <div class="description">用户姓名：</div><div class="description content"><input type="text" name="Name" style="height:20px"></div>
                    <div class="description">年龄：</div><div class="description content"><input type="text" name="Age" style="height:21px"></div>

                </div>
                <div class="clearFix">
                    <div class="description">电话：</div><div class="description content"><input type="text" name="Phone" style="height:21px"></div>
                    <div class="description">邮箱：</div><div class="description content"><input type="text" name="Email" style="height:21px"></div>
                </div>

                <div class="clearFix">

                    <div class="description">更新时间：</div>
                    <div class="description content">
                        <input class="easyui-datebox" type="text" id="txtLastUpdated" name="txtLastUpdated" />
                    </div>

                    <div class="description">父节点：</div>
                    <div class="description content">
                        <select id="box" class="easyui-combobox" name="box"
                                style="width:150px;">
                            <option value="aaaa">电子商务</option>
                            <option value="bbbb">经济管理</option>
                            <option value="cccc">软件技术</option>
                        </select>

                    </div>

                </div>
                <div class="clearFix">
                    <div>
                        <div class="description">性别：</div>
                        <div class="description content">
                            <span>男</span> @Html.RadioButton("radio1", '男', true, new { @id = "male" })
                            <span> 女</span>@Html.RadioButton("radio1", '女', new { @id = "Female" })
                        </div>

                    </div>
                    <div class="description">爱好：</div>
                    <div class="description content">
                        <span>篮球</span> @Html.CheckBox("a")
                        <span>足球</span> @Html.CheckBox("a")
                    </div>
                </div>              
            </div>

            <div class="clearFix">
                <div style="text-align:right; padding-top:10px">
                    <a href="javascript:void(0)" class="easyui-linkbutton" id="btnAddOK" iconcls="icon-ok" οnclick="btnAddOK()">确定</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" οnclick="javascript:$('#DivAdd').dialog('close')">关闭</a>
                </div>
            </div>

        </form>
    </div>

</body>
</html>
<script type="text/javascript">
    var mySelectRow = undefined; //定义一个变量，将它的值设为undefined

    $(function () {
        $("#dg").datagrid({
            title: "MyUsers",
            width: 800,
            height: 320,
            iconCls: 'icon-search', //在标题前面加一个搜索图标
            pagination: true,
            pageList: [2, 5, 8, 10],
            pageNumber: 1,
            url: "/Home/GetData",
            sortName: 'Age',
            sortOrder: 'ASC',
            toolbar: "#toolbar",

            fitColumns: true, //设置每列的宽度自适应DataGrid设定的宽度。默认为false

            columns: [[
                {
                    title: '编号',
                    field: 'Id',
                    width: 100,
                },

                {
                    title: '姓名',
                    field: 'Name',
                    width: 100,
                    sortable: true,
                },
                {
                    title: '年龄',
                    field: 'Age',
                    width: 100,

                },
                {
                    title: '电话',
                    field: 'Phone',
                    width: 100,
                },
                {
                    title: '邮箱',
                    field: 'Email',
                    width: 100,
                },

            ]],

            //在鼠标右击一行记录的时候触发
            onRowContextMenu: function (e, rowIndex, rowData) {
                e.preventDefault();//当鼠标在DataGrid里面的时候，取消右键的默认行为（即：鼠标右键的时候不弹出默认的菜单）

                if (mySelectRow != undefined) {
                    $("#dg").datagrid("unselectRow", mySelectRow); //取消这条选中行
                    mySelectRow = undefined;
                }

                if (mySelectRow == undefined) {
                    $("#dg").datagrid("selectRow", rowIndex); //将右键的这一行设为选中行
                    mySelectRow = rowIndex;
                }


                $("#menu").menu('show', { //显示菜单
                    left: e.pageX,
                    top: e.pageY,
                });

            },

        })
    })
    function doAdd() {
        $("#DivAdd").dialog('open').dialog('setTitle', '添加信息');
    }
    function btnAddOK() {
        var jsonData = $("#formAdd").serialize(); //序列化formAdd表单。
        $.ajax({
            url: "/Home/AddOrEditData", //将表单数据通过异步提交到此/Home/AddOrEditData中去处理（新增或编辑...等等）
            type: 'post',
            data: jsonData,
            success: function (data) {
                alert("数据提交成功！");
            },
            error: function () {
                alert("数据提交失败！");
            }
        })
    }
</script>

Home控制器

using MVC.Easyui.Common;
using MVC.Easyui.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Net.Http.Formatting;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace MVC.Easyui.Controllers
{
    public class HomeController : Controller
    {
        //进入视图-->HTML的写法
        public ActionResult Index()
        {
            return View();
        }


        //视图页面的Easyui-DataGrid通过异步请求数据
        public string GetData(FromData fd)
        {
            salesEntities1 db = new salesEntities1();

            int count = db.T_UserInfo.Count();

            //根据指定的字段来进行排序
            //var list = db.T_UserInfo.AsEnumerable().OrderBy(p => GetPropertyValue(p, fd.sort)).Skip((fd.page - 1) * (fd.rows)).Take(fd.rows).ToList();

            var list = db.T_UserInfo.AsEnumerable();

            //如果用户设置了排序（即：传递了sort和order参数过来）sort表示要排序的字段，order表示升序还是降序排序
            if (!string.IsNullOrEmpty(fd.sort) && !string.IsNullOrEmpty(fd.order))
            {
                //根据指定字段来排序并分页
                if (fd.order == "DESC")  
                {
                    list = list.OrderByDescending(r => r.GetType().GetProperty(fd.sort).GetValue(r)).Skip((fd.page - 1) * fd.rows).Take(fd.rows).AsQueryable();
                }
                else
                {
                    list = list.OrderBy(r => r.GetType().GetProperty(fd.sort).GetValue(r)).Skip((fd.page - 1) * fd.rows).Take(fd.rows).AsQueryable();
                }
            }
            else
            {
                list = list.OrderBy(r => r.Id).Skip((fd.page - 1) * fd.rows).Take(fd.rows).AsQueryable();
            }



            //如果搜索框的内容不为空，就进行搜索查询
            if (!string.IsNullOrEmpty(fd.searchName))
            {
                list = list.Where(r => r.Name.Contains(fd.searchName));//模糊查询
            }
            var x = new
            {
                total = count,
                rows = list.Select(r => new   //在这里来构建匿名类对象
                {
                    Id = r.Id,
                    Name = r.Name,
                    Age = r.Age,
                    Phone = r.Mobile,
                    Email = r.Email
                })
            };
            //使用Jil.JSON.Serialize()来对对象序列化需要通过安装插件 PM> Install-Package Jil -version 2.10.0
            var strJson = Jil.JSON.Serialize(x);
            return strJson;
        }

        //批量删除
        public int RemoveDataById(string id)
        {
            salesEntities1 db = new salesEntities1();
            string[] ids = id.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
            

            List<T_UserInfo> list = new List<T_UserInfo>();

            int userid = 0;
            for (int i = 0; i < ids.Length; i++)
            {
                userid = int.Parse(ids[i]);
                var user = db.Set<T_UserInfo>().FirstOrDefault(r => r.Id == userid);
                list.Add(user);
            }
            list.ForEach(r => db.Set<T_UserInfo>().Remove(r));
            return db.SaveChanges();
        }

        //新增或编辑数据（根据Id是否为空值来判断是新增还是修改）
        public int AddOrEditData(FromData row)
        {
            salesEntities1 db = new salesEntities1();
            //var rowData = Request.Form["row"];
            if (row != null)
            {
                
                //新增
                if (row.Id == 0)
                {
                    T_UserInfo user = new T_UserInfo();
                    user.Name = row.Name;
                    user.Age = row.Age;
                    user.Mobile = row.Phone;
                    user.Email = row.Email;
                    user.Gender = 1;
                    user.LoginId = 1;
                    db.T_UserInfo.Add(user);
                }
                else
                {
                    T_UserInfo model = new T_UserInfo();
                    model.Id = row.Id;
                    model.Name = row.Name;
                    model.Age = row.Age;
                    model.Mobile = row.Phone;
                    model.Email = row.Email;

                    model.Gender = 1;
                    model.LoginId = 1;
                    System.Data.Entity.Infrastructure.DbEntityEntry entity = db.Entry(model);
                    entity.State = System.Data.EntityState.Modified;

                }
                return db.SaveChanges();
            }
            return 0;

          
        }

        /*
        /// <summary>
        /// 根据传递进来的对象+对象的某个属性来返回指定对象的该属性值
        /// </summary>
        /// <param name="obj">传入类型对象</param>
        /// <param name="property">对象的某个属性</param>
        /// <returns>返回指定对象的该属性值</returns>
        private object GetPropertyValue(object obj, string property)
        {
            System.Reflection.PropertyInfo propertyInfo = obj.GetType().GetProperty(property);
            return propertyInfo.GetValue(obj, null);
        }*/
    }



    //用于接收从视图传递过来的表单参数
    public class FromData
    {
        //-----------------------以下用于分页

        //当前页
        public int page { get; set; }
        //页大小
        public int rows { get; set; }

        //-----------------------以下用于搜索

        //搜索的姓名
        public string searchName { get; set; }

        //----------------------以下用于排序

        //按哪个字段进行排序
        public string sort { get; set; }

        //排序方式（DESC ,ASC）
        public string order { get; set; }


        //-----------以下是用于新增或编辑数据
        public int Id { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }

        public string Phone { get; set; }

        public string Email { get; set; }
    }    
}