权限管理jquery-easyui用法总结

最新推荐文章于 2022-06-16 21:07:30 发布

LVTking

最新推荐文章于 2022-06-16 21:07:30 发布

阅读量2.4k

点赞数

分类专栏： EasyUI 文章标签：初学者易懂代码通俗请高手多提宝贵意见 easyui

本文链接：https://blog.csdn.net/u012403152/article/details/12887899

版权

EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在MVC+三层中使用jquery-easyui步骤和相关介绍：

介绍jQuery EasyUI：

jQuery EasyUI是以jQuery为基础的开源JavaScript网页用户界面代码库。
包含底层用户交互、动画、特效和可更换主题的可视控件。

jQuery UI的优点：

简单易用
     继承 jQuery 简易使用特性，提供高度抽象接口，短期改善网站易用性。
开源免费
   采用 MIT & GPL 双协议授权，轻松满足自由产品至企业产品各种授权需求。
广泛兼容
   兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。
轻便快捷
   组件间相对独立，可按需加载，避免浪费带宽拖慢网页打开速度。
美观多变
   提供近 20 种预设主题，并可自定义多达 60 项可配置样式规则，提供 24 种背景纹理选择。
开放公开
   从结构规划到代码编写，全程开放，文档、代码、讨论，人人均可参与

jQuery UI的缺点

A、代码不够健壮：缺乏全面的测试用例，部分组   件Bugs较多，不能达到企业级产品开发要求
B、架规划不足：组件间 API 缺乏协调，缺乏配合   使用帮助。
C、控件较少：相对于 Dojo、YUI、Ext JS 等成熟   产品，可用控件较少，无法满足复杂界面功能   要求

注：Model：用来封装表字段

在DAL：用存储过程+DBhelp来读取和判断数据库数据

在BLL：调用并判断DAL的方法

一、先将jquery-easyui的文件夹拖到MVC项目文件夹中

二、jquery-easyui中要引用的文件：

例如

1、easyui-1.32：

2、easyui-1.34

<1>.引用Jquery的Js文件

<2>.引用Easy UI的Js文件

<3>.导入Easy UI的主题Css文件

<4>.导入Easy UI的图标Css文件

<5>.引用Easy UI的国际化文件以下为让它显示中文

<scriptsrc=" jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" ype="text/javascript"></script>

<6>.页面上加上UTF-8编码防止jquery.easyui.min.js 内容乱码

三、在Easy UI中的GridView中的用法（显示，增加，修改，删除、Easy UI的修饰和用途）

1、《1》显示（前台代码的数据绑定）（注：其字段必须与后台绑定字段一致）

@*显示用户数据*@
<table id="dg" class="easyui-datagrid" title="信息显示" style="width: 700px; height: 250px"
    data-options="rownumbers:true,singleSelect:true,pagination:true,url:'/Power/PowerList'">
    <thead>
        <tr>
            <th data-options="field:'UsersId',width:80,align:'center'"">用户编号</th>
            <th data-options="field:'UsersName',width:100,align:'center'"">用户姓名</th>
            <th data-options="field:'Pass',width:80,align:'center'">用户密码</th>
            <th data-options="field:'AddDate',width:100,align:'center'">添加日期</th>
            <th data-options="field:'Power',width:80,align:'center'">操作</th>
            <th data-options="field:'jiao',width:80,align:'center'">操作角色</th>
        </tr>
    </thead>
</table>

《2》后台要将数据转换成json数据格式

    JavaScriptSerializer helper = new JavaScriptSerializer();
            string json = helper.Serialize(jsonlist);
            json = "{\"total\":" + PowerManager.GetSelList().Count() + ",\"rows\":" + json + "}";
            return Content(json);

2、《1》增加（前台代码）

@*<%--添加图层表单--%>*@
<div id="Add" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save'" style="width: 450px; height: 300px; padding: 10px;">

    <div class="easyui-panel" title="New Topic" style="width: 400px">
        <div style="padding: 10px 0 10px 60px">
            <form id="ff" method="post" action="/Power/Create">
                <table>

                    <tr>
                        <td>用户姓名</td>
                        <td>
                            <input class="easyui-validatebox" type="text" id="UsersName" name="UsersName" data-options="required:true,validType:'int'" /></td>
                    </tr>
                    <tr>
                        <td>用户密码</td>
                        <td>
                            <input class="easyui-validatebox" type="text" id="Pass" name="Pass" data-options="required:true" /></td>
                    </tr>
                </table>
            </form>
        </div>
        <div style="text-align: center; padding: 5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">提交</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">清空</a>
        </div>
    </div>
    <script>
        function submitForm() {
            location.reload();
            $('#ff').form('submit');
            $('#Add').form('close');
        }
        function clearForm() {
            $('#ff').form('clear');
        }
    </script>
</div>

《2》增加（后台代码）

      // POST: /Power/Create
        //添加用户
        [HttpPost]
        public ActionResult Create(Model.tab_Users model)
        {
            try
            {
                // TODO: Add insert logic here

                PowerManager.p_Power_AddUsers(model);
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

3、《1》修改（前台代码）

@*    修改页面*@
<div id="Update" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save'" style="width: 450px; height: 300px; padding: 10px;">
    <div class="easyui-panel" title="New Topic" style="width: 400px">
        <div style="padding: 10px 0 10px 60px">
            <form id="fun" method="post" action="/Power/Edit">
                <table>
                    <tr>
                        <td>
                            <input type="hidden" id="UsersId" name="UsersId" />
                        </td>
                    </tr>
                    <tr>
                        <td>用户姓名</td>
                        <td>
                            <input class="easyui-validatebox" type="text" id="Usersname" name="Usersname" data-options="required:true,validType:'int'" />
                        </td>
                    </tr>
                    <tr>
                        <td>用户密码</td>
                        <td>
                            <input class="easyui-validatebox" type="text" id="pass" name="pass" data-options="required:true" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div style="text-align: center; padding: 5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">修改</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">清空</a>
        </div>
    </div>
    <script>
        function submitForm() {
            location.reload();
            $('#fun').form('submit');
            $('#Update').form('close');
        }
        function clearForm() {
            $('#fun').form('clear');
        }
    </script>
</div>

《2》修改（后台代码）

       // GET: /Power/Edit/5
        //修改
        [HttpPost]
        public ActionResult Edit(Model.tab_Users model)
        {
            try
            {
                Model.tab_Users model2 = PowerManager.GetSelList().SingleOrDefault(d => d.UsersId == model.UsersId);
                model2.UsersName = model.UsersName;
                model2.Pass = model.Pass;
                model2.AddDate = DateTime.Now;
                int res = PowerManager.updateUsers(model2);

                if (res > 0)
                {
                    return RedirectToAction("Index");
                }
                else
                {
                    return View();
                }
            }
            catch
            {
                return View();
            }
        }

4、《1》删除、Easy UI的修饰和用途（前台代码）

《2》后台（删除代码）

// POST: /Power/Delete/5
        //删除
        public ActionResult Delete(int UsersId)
        {
            try
            {
                int res = PowerManager.DelUserById(UsersId);
                if (res > 0)
                {
                    return RedirectToAction("Index");
                }
                else
                {
                    return View();
                }
            }
            catch
            {
                return View();
            }
        }

LVTking

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
权限管理jquery-easyui用法总结

在MVC+三层中使用jquery-easyui步骤：注：Model：用来封装表字段在DAL：用存储过程+DBhelp来读取和判断数据库数据在BLL：调用并判断DAL的方法一、先将jquery-easyui的文件夹拖到MVC项目文件夹中二、jquery-easyui中要引用的文件：例如1、easyui-1.32：2、easyui
复制链接

扫一扫