jQuery练习7——crm项目中的权限控制

最新推荐文章于 2023-11-09 08:33:28 发布
最新推荐文章于 2023-11-09 08:33:28 发布
阅读量907 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cckevincyh/article/details/53170332
版权

这里写图片描述

需求分析：

  • 全选
  • 全不选

  • 以”客户管理”为例

    • 当选中”客户管理”的时候，所有子元素都被选中

    • 当不选中”客户管理”的时候，所有子元素都不被选中

    • 当任意一个子元素被选中的时候，”客户管理”也被选中

    • 当所有子元素都不被选中的时候，”客户管理”也不被选中
<legend><input type='checkbox' class='checkbox' name='menuModule' value='company,company' id='company_company' onClick='goSelect(this.id)' title="客户管理"  >客户管理
</legend>
<div><input type='checkbox' class='checkbox' name='menuModule' value='company,base' id='company_base' onClick='goSelect(this.id)'  title='客户拜访'>客户拜访</div>
<div><input type='checkbox' class='checkbox' name='menuModule' value='company,linkMan' id='company_linkMan' onClick='goSelect(this.id)' title='联系人列表'  >联系人列表</div>
<div><input type='checkbox' class='checkbox' name='menuModule' value='company,linkTouch' id='company_linkTouch' onClick='goSelect(this.id)' title='联系记录列表'  >联系记录列表</div>
<div><input type='checkbox' class='checkbox' name='menuModule' value='company,rule' id='company_rule' onClick='goSelect(this.id)' title='客户查重设置 '  >客户查重设置 </div>

  • 在HTML代码中，并不是父元素和子元素的结构

  • 以”客户管理”为例

    • id属性，都是以”company”开始的。利用选择器的时候，使用属性过滤选择器，[id^=company]可以找到所有”客户管理”的内容

    • id属性，只有”客户管理”是以”company”开始，以”company”结尾；以”company”开始，不以”company”结尾的就是”客户管理”的所有子元素

    • 通过goSelect(this.id)方法，可以获取到对应标签

    • 通过对应标签，获取到对应value属性的值。

      • 可以调用split()方法，把value属性的值切割成一个数组，改数组的长度为2，list[0],list[1]

      • 判断：

        • list[0]==list[1]，说明获取到的是”客户管理”
        • list[0]！=list[1]，说明获取到的是所有子元素
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择菜单</title>
<link href="style_cn.css" rel="stylesheet" type="text/css">
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

<style type="text/css">
<!--
fieldset div {
    float:left;
    width:24%;
    text-align:left;
    line-height:25px;
}
td div {
    float:left;
    width:24%;
    text-align:left;
    line-height:25px;
}
-->
</style>
<script language="javascript">
    /*
      需求分析:
           * 全选
           * 全不选

           * 以"客户管理"为例

                 * 当选中"客户管理"的时候，所有子元素都被选中
                 * 当不选中"客户管理"的时候，所有子元素都不被选中

                 * 当任意一个子元素被选中的时候，"客户管理"也被选中
                 * 当所有子元素都不被选中的时候，"客户管理"也不被选中
     */


    /*
     * <legend><input type='checkbox' class='checkbox' name='menuModule' value='company,company' id='company_company' onClick='goSelect(this.id)' title="客户管理"  >客户管理
        </legend>
        <div><input type='checkbox' class='checkbox' name='menuModule' value='company,base' id='company_base' onClick='goSelect(this.id)'  title='客户拜访'>客户拜访</div>
        <div><input type='checkbox' class='checkbox' name='menuModule' value='company,linkMan' id='company_linkMan' onClick='goSelect(this.id)' title='联系人列表'  >联系人列表</div>
        <div><input type='checkbox' class='checkbox' name='menuModule' value='company,linkTouch' id='company_linkTouch' onClick='goSelect(this.id)' title='联系记录列表'  >联系记录列表</div>
        <div><input type='checkbox' class='checkbox' name='menuModule' value='company,rule' id='company_rule' onClick='goSelect(this.id)' title='客户查重设置 '  >客户查重设置 </div>

           * 在HTML代码中，并不是父元素和子元素的结构

           * 以"客户管理"为例

              * id属性，都是以"company"开始的。利用选择器的时候，使用属性过滤选择器，[id^=company]可以找到所有"客户管理"的内容

              * id属性，只有"客户管理"是以"company"开始，以"company"结尾；以"company"开始，不以"company"结尾的就是"客户管理"的所有子元素

              * 通过goSelect(this.id)方法，可以获取到对应标签

              * 通过对应标签，获取到对应value属性的值。

                  * 可以调用split()方法，把value属性的值切割成一个数组，改数组的长度为2，list[0],list[1]

                  * 判断：
                      * list[0]==list[1]，说明获取到的是"客户管理"
                      * list[0]！=list[1]，说明获取到的是所有子元素

     */



    function goSelect(id){
        var $menuModule = $("#" + id);

        var value = $menuModule.val();

        var list = value.split(",")

        if(list[0]==list[1]){
            //操作的是"客户管理"

            if($menuModule.attr("checked")){
                //* 当选中"客户管理"的时候，所有子元素都被选中
                $("input[id^="+list[0]+"]:not([id$="+list[0]+"])").attr("checked","checked");
            }else{
                //* 当不选中"客户管理"的时候，所有子元素都不被选中
                $("input[id^="+list[0]+"]:not([id$="+list[0]+"])").attr("checked",null);
            }
        }else{
            //操作的是所有子元素

            //* 当任意一个子元素被选中的时候，"客户管理"也被选中
            if($menuModule.attr("checked")){
                $("input[id^="+list[0]+"][id$="+list[0]+"]").attr("checked","checked");
            }
            //* 当所有子元素都不被选中的时候，"客户管理"也不被选中
            var flag = false;

            $("input[id^="+list[0]+"]:not([id$="+list[0]+"])").each(function(index,domEle){

                if($(domEle).attr("checked")){
                    flag = true;
                }

            });

            if(!flag){
                $("input[id^="+list[0]+"][id$="+list[0]+"]").attr("checked",null);
            }
        }
    }




</script>
</head>
<body>
<form name="ActionForm" method="post" action="/webcrm0527/sys/sysRoleAction_set.do">
<input type="hidden" name="method" value="updateMenu">
<input type="hidden" name="roleId" value="402881e42ab919a5012ab91a0b110001">
<br/>
<div class="control">
    <button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';" 
            onClick="SelectAllBox()">
            <img src="./button/quanbuxz.png" border='0' 
            align='absmiddle'>&nbsp;全部选中</button>
    <button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"  
            onClick="UnSelectAllBox()">
            <img src="./button/quanbubxz.png" border='0' 
            align='absmiddle'>&nbsp;全部不选中</button>
    <button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"  
            onClick="document.ActionForm.submit();">
            <img src="./button/baocun.png" border='0' 
            align='absmiddle'>&nbsp;保存</button>
    <button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"  
            onClick="parent.close();">
            <img src="./button/guanbi.png" border='0' 
            align='absmiddle'>&nbsp;关闭</button>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#6A82A8">
    <tr>
        <td align="center" height="25"><span style="color:#FFFFFF; font-weight:bold">操作权限组：人力资源部权限组</span></td>
    </tr>
</table>
<div class="border" style="padding:3px">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
         <fieldset style='padding:5px;clear:left;'>
              <legend><input type='checkbox' class='checkbox' name='menuModule' value='company,company' 
                       id='company_company' onClick='goSelect(this.id)' 
                        title="客户管理"  >客户管理
              </legend>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='company,base'
                                id='company_base' onClick='goSelect(this.id)' 
                                title='客户拜访'>客户拜访</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='company,linkMan'
                                id='company_linkMan' onClick='goSelect(this.id)' 
                                title='联系人列表'  >联系人列表</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='company,linkTouch'
                                id='company_linkTouch' onClick='goSelect(this.id)' 
                                title='联系记录列表'  >联系记录列表</div>

                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='company,rule'
                                id='company_rule' onClick='goSelect(this.id)' 
                                title='客户查重设置 '  >客户查重设置 </div>

       </fieldset>

         <fieldset style='padding:5px;clear:left;'>
              <legend><input type='checkbox' class='checkbox' name='menuModule' value='sys,sys' 
                       id='sys_sys' onClick='goSelect(this.id)' 
                        title="系统设置 "  
                         >系统设置 
              </legend>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,group'
                                id='sys_group' onClick='goSelect(this.id)' 
                                title='部门设置' 
                                >部门设置</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,user'
                                id='sys_user' onClick='goSelect(this.id)' 
                                title='人事管理'  >人事管理</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,role'
                                id='sys_role' onClick='goSelect(this.id)' 
                                title='操作权限组' >操作权限组</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,province'
                                id='sys_province' onClick='goSelect(this.id)' 
                                title='省份资料' >省份资料</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,city'
                                id='sys_city' onClick='goSelect(this.id)' 
                                title='城市资料' >城市资料</div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='sys,code'
                                id='sys_code' onClick='goSelect(this.id)' 
                                title='编码规则' >编码规则</div>

       </fieldset>

         <fieldset style='padding:5px;clear:left;'>
              <legend><input type='checkbox' class='checkbox' name='menuModule' value='report,report' 
                       id='report_report' onClick='goSelect(this.id)' 
                        title="报表与分析" >报表与分析
              </legend>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='report,khflfx'
                                id='report_khflfx' onClick='goSelect(this.id)' 
                                title='客户分类分析 ' >客户分类分析 </div>
                    <div><input type='checkbox' class='checkbox' name='menuModule' 
                         value='report,khfx'
                                id='report_khfx' onClick='goSelect(this.id)' 
                                title='客户分析 ' >客户分析 </div>
       </fieldset>
</td>
    </tr>
</table>

</div>
</form>
</body>
</html>
c.
关注
专栏目录
Microsoft Dynamics 365 CE 扩展定制 - 2. 客户端扩展
Martin-Mei的博客
09-23 481
Dynamics365套件最大的优势之一是其基于web的前端。用户不需要在他们的机器上安装胖客户端就可以访问该平台；一个网络浏览器就足以访问它。大多数最终用户认为前端用户体验对他们的日常工作至关重要。Dynamics 365 Sales提供了广泛的可配置扩展，以增强前端用户体验。在上一章中，我们介绍了一些无代码扩展；然而，有时，客户的要求超出了Dynamics365提供的开箱即用功能。这就是JavaScript的用武之地。JavaScript是目前最流行的web前端脚本语言。
「需求广场」需求词更新明细（三）
csdndownload01的博客
05-18 3938
本期共更新需求词641个，全量展示供各位上传者参考。
JQuery UI实现权限管理系统
03-20
很好的学习资料，有助于对其JQqery UI框架的运用和掌握，权限管理使你理解的很透彻，值得下载
jQuery权限控制
幸福的使者
09-22 3083
权限选择             .zhengt         {             float: left;             height: 90px;             width: 10%;         }                     $(function () {             $("input[value=>
jQuery-权限操作
weixin_57772585的博客
06-16 931
1.我们设置一个div，我们直接用css里面行内样式来设置div的样式，用style设置左外边距和上外边距然后背景色2.然后在div里面设置一个select标签，，写一个select标签里面再写5个option标签然后里面添加文字。multiple(设置多选)并且用css的行内样式设置select的宽高和浮动，再设置id名。3.然后再设置一个div，用style设置宽和左浮动，然后给div里面设置4个input按钮标签，并且行内样式设置按钮的宽和id名4.再一个select标签，然后multiple(设置多
jquery 权限控制菜单
CBlUE2014
06-19 2747
要实现的效果： 1、父节点选中，则下面的子节点全选中 2、父节点不选中，则下面的子节点全不选中 3、子节点只要选中了一个，则父节点选中 4、子节点全不选中，则父亲节点不选中 <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getSer
jquery实现简单三层,通用权限控制,CRM,ERP
10-28
1.jquery实现的三层架构通用管理ERP,CRM系统 2.如有问题请联系QQ 594609185 3.采用VS2005+SQL2005+jQuery开发 4.你的支持就是别人努力的动力! 5.网站:http://kingkoo.cnblogs.com/ 6.http://download.csdn.net/source/1863788 请下载这个KINGLIB库才能使用本系统.用下载的库替换KINGLIB就好..BLL,DAL.WEB都要替换...重新编译.如不可以请重新引用试下..
卷积神经网络的Python实现,python卷积神经网络训练
super67269的博客
08-14 6956
对于想要自学Python的小伙伴，这里整理了一份系统全面的学习路线，按照这份大纲来安排学习可以少走弯路，事半功倍。第一阶段：专业核心基础阶段目标：1.熟练掌握Python的开发环境与编程核心知识2.熟练运用Python面向对象知识进行程序开发3.对Python的核心库和组件有深入理解4.熟练应用SQL语句进行数据库常用操作5.熟练运用Linux操作系统命令及环境配置6.熟练使用MySQL，掌握数据库高级操作7.能综合运用所学知识完成项目知识点：Python编程基础、Python面向对象、Python高级进阶
红队系列-网络安全知识锦囊(持续更新)
最新发布
aming小老弟
11-09 1007
AJP13是定向包协议。因为性能原因，使用二进制格式来传输可读性文本。AJP协议：WEB服务器通过TCP连接和SERVLET容器连接。为了减少进程生成socket的花费，WEB服务器和SERVLET容器之间尝试保持持久性的TCP连接，对多个请求/回复循环重用一个连接。一旦连接分配给一个特定的请求，在请求处理循环结束之前不会在分配。换句话说，在连接上，请求不是多元的。这个是连接两端的编码变得容易，虽然这导致在一时刻会有很多连接。
互联网职业介绍
IT修真院：初学者转行到互联网的聚集地
10-17 1745
互联网行业的薪资水准相对较高，刚入行一个月，半年，或者一年超过其他行业薪资很正常。 那么，互联网行业究竟有哪些职位呢，又分别适合哪些传统行业转型呢？ 产品经理 UI CSS JS 后端（Java/php/python） DBA(mysql/oracle) 运维（OP） 测试（QA 算法（分类/聚类/关系抽取/实体识别） 搜索（Lucene/Solr/elasticSearch...
JQuery 办公系统 框架 可应用于 CRM 系统
06-13
JQuery 办公系统 框架 可应用于 CRM 系统。 使用IE预览，如果出现乱码，可选择UTF-8编码。
jQuery权限系统
09-18
jQuery LigerUI.Case.LigerRM(权限管理系统).rar jQuery LigerUI.Case.LigerRM(权限管理系统).rar jQuery LigerUI.Case.LigerRM(权限管理系统).rar
jquery 选择父级子级权限
11-09
选中父级时，所有子全选中。子级取消选择时，当同级没有一个选中时，则其父级也取消选中，如果还有一个子级被选中，则不影响父级的选中状态
JQuery实现带排序功能的权限选择实例
12-09
本文实例讲述了JQuery实现带排序功能的权限选择。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></
使用jquery实现select添加实现后台权限添加的效果
12-12
呃。其实很简单的东西啦。页面的图 两个列表都可以多选， 实现如下效果： 1、双击第一个列表中任意一个列表项，实现向下添加 2、双击第二个列表中任意一个列表项，实现删除， 2、点击按钮，实现对应功能。 Html代码 代码如下: <form name=”form1″ method=”post” action=””> <select id=”select1″ size=”5″ multiple style=”width:100px ” > <option value=”111″>北京</option> <option value=”222″>上海</option> <option value=”3
jquery 按钮权限控制_一个支持消息推送,文件管理,在线用户监控的后台权限管理系统来了...
weixin_35562751的博客
01-30 445
crowd-admin项目介绍crowd-admin是一个通用后台权限管理系统，集成了rbac权限管理、消息推送、邮件发送、任务调度、代码生成、elfinder文件管理等常用功能，系统内各个业务按照模块划分，前台使用H+模板。是一个java新人易于上手，学习之后能够快速融入企业开发的指导项目主要特性项目按功能模块化，提升开发，测试效率支持消息推送集成elfinder进行文件管理支持数据字典支持邮件...
JQuery 权限选择例子
limlimlim的专栏
07-02 3067
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                     select{width:100px;height:100px;float:left;margin:10px;}                #main{f
管理系统类项目的登陆与权限功能的实现
weixin_30642305的博客
08-31 403
前言 笔者最近参与了公司的几个业务的管理系统类项目，在这样的项目需求中，相对于所选择的前端技术栈以及前后端分离协同开发的模式。理解并实现后台项目的业务需求是其中的重点，其中，账户的登陆，以及权限验证与安全性是非常重要的。本文就以一个系统为例讲一讲如何在各技术与业务相结合完成这样的需求。所以本文对于技术细节不多赘述，重点说办法与思想。 需求与设计: 本系统为客服所用的工单系统，所以改系统的用户均...
权限管理框架实现（3）--jquery自定义标签
ESOO
04-12 5778
上篇文章，介绍了，使用ValueStack对权限进行控制，但是还是需要前台工作者去写，其实，我们利用jquery，就可以做到对html标签的控制，基本思路如下：1，获取所有特殊标签集合2，ajax后台申请权限3，判断返回值，没有权限则消除标签具体js代码如下1，获取集合 var authObjs = $("auth[TestAuth='true']");2，ajax申请后台 $.ajax({
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要绑定事件的元素，`event` 表示要绑定的事件类型，比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件： ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样，当 `event1` 或 `event2` 中任意一个事件触发时，对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序，可以使用 `off()` 方法： ``` $(selector).off(event); ``` 其中，`event` 表示要解除的事件类型。如果不指定事件类型，则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中，我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上，而不是绑定到子元素上，然后通过事件冒泡来判断是哪个子元素触发了该事件。这样，当子元素数量较多时，只需要绑定一次事件，就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中，`selector` 表示父元素，`event` 表示要绑定的事件类型，`childSelector` 表示要委托的子元素的选择器，事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作，希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值