zoukankan      html  css  js  c++  java
  • EasyUI第一章Application之Basic CRUD(增删改查)

    先看效果图:

    增加:

    修改:

    删除:

    具体实现:

    html与js代码:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
        <table id="dg" title="用户列表" class="easyui-datagrid" style="700px;height:250px"
               url="/Home/GetUserInfo"
               toolbar="#toolbar" pagination="true"
               rownumbers="true" fitcolumns="true" singleselect="true">
            <thead>
                <tr>
                    <th field="FirstName" width="50">First Name</th>
                    <th field="LastName" width="50">Last Name</th>
                    <th field="Phone" width="50">Phone</th>
                    <th field="Email" width="50">Email</th>
                </tr>
            </thead>
        </table>
        <div id="toolbar">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newUser()">新建</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editUser()">修改</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
        </div>
    
        <div id="dlg" class="easyui-dialog" style="400px"
             closed="true" buttons="#dlg-buttons">
            <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
                <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">用户信息</div>
                <div style="margin-bottom:10px">
                    <input name="FirstName" class="easyui-textbox" required="true" label="First Name:" style="100%">
                </div>
                <div style="margin-bottom:10px">
                    <input name="LastName" class="easyui-textbox" required="true" label="Last Name:" style="100%">
                </div>
                <div style="margin-bottom:10px">
                    <input name="Phone" class="easyui-textbox" required="true" label="Phone:" style="100%">
                </div>
                <div style="margin-bottom:10px">
                    <input name="Email" class="easyui-textbox" required="true" validtype="email" label="Email:" style="100%">
                </div>
            </form>
        </div>
        <div id="dlg-buttons">
            <a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="saveUser()" style="90px">保存</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="90px">取消</a>
        </div>
        <script type="text/javascript">
            var url;
            //新建
            function newUser() {
                $('#dlg').dialog('open').dialog('center').dialog('setTitle', '新建用户'); //打开、居中、设置标题
                $('#fm').form('clear'); //清除表单数据
                url = '/Home/SaveUsers';
            }
            //编辑
            function editUser() {
                var row = $('#dg').datagrid('getSelected'); //获取选中的行
                if (row) {
                    $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Edit User');
                    $('#fm').form('load', row);
                    url = '/Home/SaveUsers';
                } else {
                    $.messager.alert({
                        title: '系统提示',
                        msg: '请选择需要修改的行'
                    });
                }
            }
            //保存
            function saveUser() {
                $('#fm').form('submit', {
                    url: url,
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    success: function (result) {
                        var result = eval('(' + result + ')');
                        if (result.IsSuccess) {
                            $.messager.show({
                                title: '系统提示',
                                msg: result.Message
                            });
                            $('#dg').datagrid('reload');    // 刷新
                        } else {
                            $.messager.show({
                                title: '系统提示',
                                msg: "保存失败"
                            });
                        }
                    }
                });
            }
            //删除
            function destroyUser() {
                var row = $('#dg').datagrid('getSelected');
                if (row) {
                    //提示用户是否真的删除
                    $.messager.confirm('提示', '你真的要删除吗?', function (r) {
                        if (r) {
                            $.post('/Home/DeleteUsers', { id: row.Id }, function (result) {
                                if (result.IsSuccess) {
                                    $.messager.show({    //错误提示
                                        title: '系统提示',
                                        msg: result.Message
                                    });
                                    $('#dg').datagrid('reload');    // 刷新已经删除的记录
                                } else {
                                    $.messager.show({    //错误提示
                                        title: '系统提示',
                                        msg: "删除失败"
                                    });
                                }
                            }, 'json');
                        }
                    });
                } else {
                    $.messager.alert({
                        title: '系统提示',
                        msg: '请选择要删除的数据'
                    });
                }
            }
        </script>
    </body>
    </html>

    后台CS代码:

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    
        public ActionResult ApplicationBasicCRUD()
        {
            return View();
        }
    
        [HttpPost]
        public JsonResult GetUserInfo()
        {
            EasyUiPages easyUiPages = new EasyUiPages();
            List<UserInfo> userInfo = new List<UserInfo>();
            userInfo.Add(new UserInfo() { Id = 1, FirstName = "Tom", LastName = "Jim", Phone = "138123456789", Email = "AA@qq.com" });
            userInfo.Add(new UserInfo() { Id = 2, FirstName = "AAA", LastName = "TTT", Phone = "123456789", Email = "BB@qq.com" });
            userInfo.Add(new UserInfo() { Id = 3, FirstName = "BBB", LastName = "VVV", Phone = "666666", Email = "CC@qq.com" });
            easyUiPages.total = userInfo.Count();
            easyUiPages.rows = userInfo;
            return Json(easyUiPages);
        }
    
        public ActionResult SaveUsers()
        {
            ResultState resultState = new ResultState();
            resultState.IsSuccess = true;
            resultState.Message = "保存成功";
            return Json(resultState);
        }
    
        public ActionResult DeleteUsers()
        {
            ResultState resultState = new ResultState();
            resultState.IsSuccess = true;
            resultState.Message = "删除成功";
            return Json(resultState);
        }
    
    }
    
    public class ResultState
    {
        public bool IsSuccess { get;set;}
        public string Message { get; set; }
    }

    UserInfo类:

    public class UserInfo
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Phone { get; set; }
        public string Email { get; set; }
    }
    
    public class EasyUiPages
    {
        /// <summary>
        /// 所有数据
        /// </summary>
        public object rows { get; set; }
        /// <summary>
        /// 总行数
        /// </summary>
        public object total { get; set; }
    }
  • 相关阅读:
    ICONS-图标库
    图形资源
    vue项目中,如果修改了组件名称,vscode编辑器会在引入修改组件的名字处提示红色波浪线 The file is in the program because:Imported via xxx Root file specified for compilation .
    接口在dev环境报跨域问题(has been blocked by CORS policy:Response to preflight request doesn't pass access control check:No 'Access-Control-Allow-Origin' header ispresent on the requested resource.),qa环境正常
    阿里云occ的图片文件URL用浏览器直接打开无法访问,提示This XML file does noe appear to have any style information associated with it. The document tree is shown below.
    vue 项目使用element ui 中tree组件 check-strictly 用法(父子不互相关联的反显情况)
    高德地图进行线路规划绘制标记点操作(vue)
    vue中实现拖拽调整顺序功能
    2021-01-22 浏览器相关知识
    2021-01-22 js 相关知识点
  • 原文地址:https://www.cnblogs.com/genesis/p/5834287.html
Copyright © 2011-2022 走看看