DWZ中Tree树形菜单的treeCheck如何获取返回值解决方案

简介:

最近在对DWZ和asp.net MVC3进行整合,其中遇到了很多问题,总算一一解决了,今天就说说题目所示的问题解决方案。

想做一个基于角色的权限管理,要对每一个Action进行权限控制。就想用DWZ的Tree树形菜单来做,结果在做的过程之中,发现DWZ的Tree树形菜单,自带的treeCheck无法返回选择的值,遇到过这种问题的朋友,应该知道这个情况。虽然官方提供一个KKK的源码样本,但基本没用,因为菜单前的复选框取消选择时,Json返回的items是空值。

经过网上搜索,没有找到有效的答案,最后自己想办法解决了,方法很笨拙,但有效。解决方法就是自己手动添加CheckBox,不要用它的treeCheck属性,也不要用它的链接扩展属性。

我先用简单的mvc示例代码循环出菜单

复制代码
复制代码
 <ul class="tree treeFolder expand">
                        @for(int i=1;i<=3;i++)
                        {
                            <li><a  href="javascript:void(0);">一级菜单 @i</a>
                                <ul>
                                    @for(int m=1;m<=5;m++)
                                    {
                                        <li><label><input type="checkbox" id="@("menu"+i+m)" />二级菜单 @m</label></li>
                                    }
                                </ul>
                            </li>
                        }
                    </ul>
复制代码
复制代码

然后在页面上其它随便某个地方放置一个按钮,触发Jquery事件。

<input type="submit" id="btn" value="输出选择内容" />

然后编写JQuery代码或js代码就可以了。

复制代码
复制代码
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            var str = "";
            $('input[type="checkbox"]:checked').each(function (i, e) {
                str += e.id + ",";
            });
            str = str.substring(0, str.length - 1);
            $("#resultBox").html(str);
        });
    });
</script>
复制代码
复制代码

选择好需要的对象后,点击这个按钮就成了。如图

说得不是很清楚,没用过DWZ的树形菜单的朋友肯定不知所云,但用过并遇到这种情况的朋友,就知道我说的是什么了

分类:  Jquery

本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/6164872.html ,如需转载请自行联系原作者
相关文章
|
6天前
uniapp uni-combox 下拉提示无匹配项(完美解决--附加源码解决方案及思路)
uniapp uni-combox 下拉提示无匹配项(完美解决--附加源码解决方案及思路)
13 0
|
9月前
|
JSON 前端开发 数据格式
前端(二十一):label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑
label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑
103 0
|
11月前
|
JSON JavaScript API
Vue2.x-01点击按钮弹出子Vue组件,遍历JSON展示数据
Vue2.x-01点击按钮弹出子Vue组件,遍历JSON展示数据
201 0
|
JavaScript
vue怎么实现element表格里表头信息提示功能?
vue怎么实现element表格里表头信息提示功能?
244 0
vue怎么实现element表格里表头信息提示功能?
|
JavaScript
js基础笔记学习214元素得属性和节点1方式1
js基础笔记学习214元素得属性和节点1方式1
50 0
js基础笔记学习214元素得属性和节点1方式1
|
JavaScript 前端开发
JavaScript通过改变location对象的hash属性实现相同页面显示不同详情内容的效果
JavaScript通过改变location对象的hash属性的应用 前面我们学到了BOM的Location对象,现在来讲一下实际的应用。通过改变hash属性获取不同的数据。 1.列表页面代码: &lt;a href=&quot;10模拟详情页面.html#0&quot; target=&quot;_blank&quot;&gt;张三&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#1&quot; target=&quot;_blank&quot;&gt;李四&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#2&quot; target=&quot;_blank&quot;&gt;王五&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#3&quot; target=&quot;_b
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
647 0
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
|
前端开发
前端工作总结142-element上传组件时候的钩子--event里面有数据参数
前端工作总结142-element上传组件时候的钩子--event里面有数据参数
60 0
前端工作总结142-element上传组件时候的钩子--event里面有数据参数
|
JavaScript
js实例对象使用属性和方法的搜索顺序
js实例对象使用属性和方法的搜索顺序
175 0
js实例对象使用属性和方法的搜索顺序