菜单

使用iScroll和photoswipe写手提式有线电话机浏览图片的插件的几点经历

2019年5月4日 - 皇家赌场系统

图片 1

代码:

复制代码 代码如下:

    贰就算只选择了有些子节点,怎么让该节点有所的父节点全体变为选中状态?

 

 

图片 2 
extjs
如图,达成带有复选框的树,选中父节点时,选中全数子节点。撤消全数子节点时,才具收回根节点。

于是,上边的函数代码中就足以如此丰裕:

选中team_id,对应的member_id都选中,并传递member_id,而不传递team_id。而地点的顺序直接把id传出

2013/03/%e8%a7%a3%e5%86%b3iscroll%e6%a8%aa%e5%90%91%e6%bb%9a%e5%8a%a8%e5%8c%ba%e5%9f%9f%e6%97%a0%e6%b3%95%

如图,完毕带有复选框的树,选中父节点时,选中全体子节点。撤销全部子节点时,才干撤废根节点。
复制代码 代码如下: var Fpanel =…

  鄙人公司没有专门的前端,所以项目支付中都从前后端一同抡。近期用bootstrap用的可比频仍,发掘bootstrap除了框架本人的样式组件外,还提供了多样插件供开拓者选拔。本篇博文讲的正是bootstrap的1个树形插件bootstrap-treeview。

 

自身计划对li用height:auto;也没效果。

var Fpanel = new Ext.tree.TreePanel({
id:’ptree’,
region:’west’,
layout:’anchor’,
border:false,
rootVisible: false,
root:new Ext.tree.AsyncTreeNode({}),
listeners:{
“checkchange”: function(node, state) {
if (node.parentNode != null) {
//子节点选中
node.cascade(function(node){
node.attributes.checked = state;
node.ui.checkbox.checked = state;
return true;
});
//父节点选中
var pNode = node.parentNode;
if (state || Fpanel.getChecked(id, pNode) == “”) {
pNode.ui.toggleCheck(state);
pNode.attributes.checked = state;
}
}
}
}
});
authorityTree(Fpanel);
var authorityTree = function(Fpanel){
Ext.Ajax.request({
url: ‘authorityTree.ashx’,
method:’get’,
success: function(request) {
var data = Ext.util.JSON.decode(request.responseText);
Fpanel.getRootNode().appendChild(data);
Fpanel.getRootNode().expandChildNodes(true);
Fpanel.expandAll();
},
failure: function() {
Fpanel.render();
Ext.MessageBox.show({
title: ‘提示’,
msg: ‘服务器忙,请使用火狐浏览器浏览或稍后重试!’,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
}
});
}

图片 3图片 4

$('.strTree li div input:checkbox').click(function () {//问题:如何实现选中车队,对应成员全部选中,并传对应所有成员的member_id,而不是传team_id

                team_id = document.getElementsByName($(this).attr('id1'));    //通过name   获取name='team_id'的子元素        ($(this).attr('id'))为被选中的车队名               
                team = document.getElementById($(this).attr('id')); //通过id获取   获取的是被勾选的车队或者车辆的id              
                if (team.checked) {
                    for (i = 0; i < team_id.length; i++) {
                        team_id[i].checked = true;
                    }
                } else {
                    for (i = 0; i < team_id.length; i++) {
                        team_id[i].checked = false;
                    }                  
                }

                //alert(team_id.length);
                var indexs = [];          
                var vehIds = [];         
                $(".strTree li div input:checkbox:checked").each(function (i) {  //由于复选框选中多个,所以循环输出
                    v = document.getElementsByName($(this).attr('id1'));
                    //alert("v的值" + v.length);
                    if (v.length == 0) {
                        //vehIds[i] = $(this).attr('id2') + "|" + $(this).attr('id3');                       
                        indexs[i] = $(this).attr('id2');
                        vehIds[i] = $(this).attr('id3');
                    } 
                    //vehIds[i] = $(this).attr('id');   //attr() 方法设置或返回被选元素的属性值            

                });              
                for (var i = 0; i < indexs.length; i++) {            //清除vehIds[]中的所有空字符串
                    if (indexs[i] == '' || indexs[i] == null || typeof (indexs[i]) == undefined) {
                        indexs.splice(i, 1);
                        i = i - 1;
                    }
                }
                for (var i = 0; i < vehIds.length; i++) {            //清除vehIds[]中的所有空字符串
                    if (vehIds[i] == '' || vehIds[i] == null || typeof (vehIds[i]) == undefined) {
                        vehIds.splice(i, 1);
                        i = i - 1;
                    }
                }                                        
                self.vehIds = vehIds;
                self.indexs = indexs;

                var path = 'TeamMap.aspx';
                window.parent.frames['target_right'].location = path;
                Loading(true);
            });

新生查看资料才了解,是iScroll为了能有越来越好的滑动作效果果,在它左右滑行的时候,禁止使用了前后滑动。

  自此,上边提到的五个难点就终于马到功成了。。。吗?稍等,如若那就算达成了,那篇博文记录对自己实际未有多轮廓义。正当笔者如获宝贝的以为功用完成了的时候,突然发掘了异常的大的bug,正是在通过子节点选中具备父节点的效果达成中,选中是不曾难点,可是当撤除有些子节点,无论兄弟节点是不是有入选,父节点都一齐被吊销掉了。那明确是有标题的。所以,本身又对撤消事件单独做了判定,判定打消的时候,是不是还有兄弟节点是高居选中状态,如若有,那么父节点就不进行撤废了。代码如下:

消除办法:

总计为:iScroll在横向滚动区域的左右滑动难题。

   然后,通过对中选的脚下节点开始展览遍历,对遍历出的节点试行选中;假设实节点还有子节点,很轻便,递归一下就会解决:

调解结果:

图片 5

function checkAllNodes(method, node) {
    var $tree = $('#modifyTree');
    $(node.nodes).each(function (a, b) {
        //判断子节点存在,就执行相应的选中/取消事件。
        //each回调函数中参量:a表示节点索引,b表示节点对象
        $tree.treeview(method, [b.nodeId, {
            silent: true
        }]);
        if (b.nodes) //递归调用
            checkAllNodes(method, b);
    });
}

 

 

View Code

图片 6

e6%8b%89%e5%8a%a8%e9%a1%b5%e9%9d%a2%e7%9a%84%e9%97%ae%e9%a2%98/

 1 function modify(id) {
 2     BASE.ajax("permission/pers", {
 3         id: id
 4     }, function (data) {
 5         $("#demoTree").treeview({
 6             color: "#428bca",
 7             data: data,
 8             levels: 1, //显示时展开到几级
 9             showIcon: false,
10             showCheckbox: true,
11             onNodeChecked: function (event, node) {  //选中事件
12                 checkAllNodes("checkNode", node);
13             },
14             onNodeUnchecked: function (event, node) { //取消事件
15                 checkAllNodes("uncheckNode", node);
16             }
17         });
18         $("#modal").modal("show");
19     });
20 }

 

譬如说iScroll.js中的这句:onBeforeScrollStart: function (e) {
e.preventDefault(); }。

 1 function checkAllNodes(method, node) {
 2     var $tree = $('#modifyTree');
 3     if (node.parentId) {//如果父节点存在,选中/去除父节点
 4         getParentNode(method, node, $tree);
 5     }
 6     $(node.nodes).each(function (a, b) {
 7         $tree.treeview(method, [b.nodeId, {
 8             silent: true
 9         }]);
10         if (b.nodes)
11             checkAllNodes(method, b);
12     });
13 }
14 
15 function getParentNode(method, node, tree) {
16     tree.treeview(method, [node.parentId, {
17         silent: true
18     }]);
19     var pnode = tree.treeview('getNode', node.parentId);
20     if (pnode.parentId) //递归判断父节点是否还有父节点
21         getParentNode(method, pnode, tree);
22 }

在TeamTree.aspx中,先是把复选框选中的全体因素保存到数组中,分界面点击传出的当选的结果,对应促成应有勾选的各结果

图片 7

  目前项目权限模块中,要求将用户菜单做成可安顿的。授权人士的授权操作是经过对树形菜单中的复选框举行勾选后保存来达成的,如下图所示:

http://www.codeweblog.com/jquery%e6%93%8d%e4%bd%9c%e5%a4%8d%e9%80%89%e6%a1%86-checkbox-%e7%9a%8412%e4%b8%aa%e5%b0%8f%e6%8a%80%e5%b7%a7%e6%80%bb%e7%bb%93/

透过改变,确实能够兑现左右滑行图片的同时,若图片长度超越显示屏尺寸,则足在此以前后滑动浏览。可是用户体验拾贰分不好,图片产生了左右左右等几个趋势都能滑动了。

  博主开垦的时候也是问了度娘,但众多网上好友的享受让投机那样前端薄弱的人看得头大,所以项目效率完结后,特意整理了温馨的精简实现,如博友有更好的形式,应接告知,共同提高。

参考实例:

e6%8b%89%e5%8a%a8%e9%a1%b5%e9%9d%a2%e7%9a%84%e9%97%ae%e9%a2%98/

View Code

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图