jstree中想要选中子节点,父节点就会变成选中状态,需要如何修改。

jstree中想要选中子节点,父节点就会变成选中状态,需要如何修改。,第1张

修改方法:

JQuery

$('#子节点id')parent()attr('id');//通过子元素id获取父元素

js

documentgetElementById("子节点id")parentNodegetAttribute("id");

1、JS即Javascript,Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有288kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。

2、能够具有交互性,能够包含更多活跃的元素,就有必要在网页中嵌入其它的技术。如:Javascript、VBScript、Document Object Model(DOM,文档对象模型)、Layers和 Cascading Style Sheets(CSS,层叠样式表),这里主要讲Javascript。那么Javascript是什么东西Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言,如今越来越广泛地使用于Internet网页制作上。

一个带有右键 *** 作的树形菜单

$(document)ready(function(){

    $ajaxSetup({cache:false});

    $("#browser")tree({

    data  : {

        type  : "json",

        url   : src,

        async : true,

        async_data : function (NODE) {

                                        return { parent_Id : $(NODE)attr("id") || 0}

                                     }

      },

      lang:{

           loading:"目录加载中……"

            },

      rules:

      {

      draggable   : "all"   //这个设置可以使得节点进行拖动 *** 作

      },

      ui:{

           context     : [ //自定义右键 *** 作的可 *** 作内容

            {

                id      : "create",

                label   : "添加下级目录", //右键d出菜单的此项 *** 作屏显字样

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); }, //允许节点被右击时出现 *** 作菜单

                icon    : "<%=requestgetContextPath() %>/css/themes/default/createpng",//右键d出菜单的此项 *** 作图标

                action  : function (NODE, TREE_OBJ) {

                                                //进行此项 *** 作,将有这个函数事件被响应

                                                     }

            },

            "separator"//这个是在两个 *** 作之间画一条分隔线

           ,

            {

                id      : "edit",

                label   : "编辑目录信息",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/image/reg2gif",

                action  : function (NODE, TREE_OBJ) {

                                                    openWindow('myurl','','',function(){treeRefresh($(NODE)attr("id"));});

                                                    }

            },

            "separator"

            ,

            {

                id      : "privilege",

                label   : "设置目录权限",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/css/themes/default/renamepng",

                action  : function (NODE, TREE_OBJ) {

                                                    openWindow('myurl','','',function(){treeRefresh($(NODE)attr("id"));});

                                                    }

            },

            "separator",

            {

                id      : "delete",

                label   : "删除",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/css/themes/default/removepng",

                action  : function (NODE, TREE_OBJ) {

                                                    var tree=$tree_reference("browser");

                                                    openWindow('myurl','','',function(){

                                               //下边的parent()和refresh()均为v098版本提供,如果你使用的是其他版本如v096等,这些将不被支持。

                                                    NODE=$(treeparent(NODE));

                                                    if($(NODE)attr("id")==undefined){

                                                        treerefresh();

                                                    }else{

                                                        TreeRefresh();

                                                    }

                                                    });

                                                    }

            },

            "separator",

            {

                id      : "others",

                label   : "其他 *** 作",

                visible : function (NODE, TREE_OBJ) { if(NODElength != 1) return false; return TREE_OBJcheck("creatable", NODE); },

                icon    : "<%=requestgetContextPath() %>/css/images/cutpng",

                action  : function (NODE, TREE_OBJ) {

                                                    alert("暂无可提供 *** 作。");

                                                    }

            }

            ]

      },

   callback : {

         onselect: function(node) {

            //(a);

           

        }

    }

 

});

function treeRefresh(nodeid){

                     var rid=nodeid;

                    var tree=$tree_reference("browser");

                    var par_node=treeparent($("#"+rid));

                    treerefresh(par_node);

}

});

在DhtmlXtree中可以用treegetLeafCount(itemId)获取节点下的子节点数,如果你想计算的是根节点下所有的子节点的话,可以先用上面的计算出根节点下的子节点数然后在有循环判断这些子节点中那个有孩子节点然后在根据treegetLeafCount(itemId)计算此节点下的字节点数,依次循环直至最后。

Extjs treeGrid分页实例,项目中用到,拿出来跟大家分享一下,主要是通过两个store实现。

[javascript] view plaincopy

ProTreeGrid = Extextend(ExttreePanel, {

_baseParam : {

process : '项目立项',

isShow : 'true',

start : 1

},

constructor : function(_config) {

if (_config == null)

_config = {};

Extapply(this, _config);

thisstore1 = Extcreate('ExtdataJsonStore', {

autoLoad : true,

pageSize : basicConstantLIMIT,

proxy : {

type : 'ajax',

url : "xmgl/pro-info-manage!pageaction",

extraParams : this_baseParam,

reader : {

type : 'json',

root : 'rows',

totalProperty : "totalCount"

}

},

model : 'ProInfo'

});

thisstore = Extcreate('ExtdataTreeStore', {

model : 'ProInfo',

proxy : {

type : 'ajax',

url : 'xmgl/pro-info-manageaction'

},

folderSort : true,

listeners : {

'beforeload' : {

fn : function(_s, _op, _e) {

this_baseParamlimit = basicConstantLIMIT;

_sproxyextraParams = this_baseParam;

},

scope : this

}

}

});

this['selModel'] = Extcreate('ExtselectionTreeModel', {

mode : 'SINGLE',

listeners : {

'selectionchange' : {

fn : thisselectionChangeHandler,

scope : this

}

}

});

this['columns'] = [ {

xtype : 'treecolumn',

text : '项目性质',

flex : 1,

sortable : true,

dataIndex : 'proClass'

}, {

text : '项目名称',

flex : 25,

dataIndex : 'proName',

sortable : true

}, {

text : '流程状态',

flex : 75,

dataIndex : 'process',

sortable : true

}, {

text : '项目时间',

xtype : 'datecolumn',

format : 'Y-m-d',

dataIndex : 'crTime',

sortable : true,

flex : 85

}, {

text : '项目编号',

flex : 1,

dataIndex : 'proNo',

sortable : true

}, {

text : '项目单位',

flex : 1,

dataIndex : 'unit',

sortable : true

}, {

text : '优先级',

flex : 6,

dataIndex : 'priority',

sortable : true

}, {

text : '项目类型',

flex : 75,

dataIndex : 'proType',

sortable : true

}, {

text : '项目内容',

flex : 2,

dataIndex : 'proContent',

sortable : true

}, {

text : '附件数',

flex : 6,

dataIndex : 'fileCount',

sortable : true

} ]

ProTreeGridsuperclassconstructorcall(this, {

useArrows : true,

height : this_height,

width : this_width,

autoScroll : true,

rootVisible : false,

dockedItems : [ {

_treeGrid : this,

xtype : 'pagingtoolbar',

id : 'PROTREEGRID_PAGEBAR',

store : thisstore1,

dock : 'bottom',

displayInfo : true,

listeners : {

change : function(obj, pdata, options) {

if(this_treeGrid_baseParamstart==pdatacurrentPage)

return;

this_treeGrid_baseParamstart = pdatafromRecord;

this_treeGrid_baseParamlimit = basicConstantLIMIT;

this_treeGridstoreload( {

params : this_treeGrid_baseParam

});

}

}

} ],

viewConfig : {

stripeRows : true,

enableTextSelection : true,

getRowClass : function(record) {

if (recordget("proClass") == '收入项目') {

return 'srcss';

} else if (recordget("proClass") == '支出项目') {

return 'zccss';

}

}

},

tbar : new ExttoolbarToolbar( {

id : 'TBAR_PROTREEGRID',

items : [ new ProClassQueryCombo( {

width : 140,

labelWidth : 60

}), '-', '项目名称:', {

xtype : 'textfield',

width : 70

}, '无分项总体项目显示:', {

xtype : 'checkbox',

checked : true,

width : 70

}, {

text : "查询",

icon : 'images/icons/searchgif',

handler : thisonSearch,

scope : this

}, {

text : "重置",

icon : 'images/icons/delgif',

handler : thisonReset,

scope : this

}, {

text : "高级查询",

icon : 'images/icons/searchgif',

handler : thisonAdvSearch,

scope : this

} ]

})

});

},

selectionChangeHandler : function() {

},

reLoadData : function() {

thisstoreload( {

params : this_baseParam

});

thisstore1load( {

params : this_baseParam

});

},

onSearch : function() {

var _param = {};

var _tbar = ExtgetCmp('TBAR_PROTREEGRID');

_paramprocess = _tbaritemsitems[0]value;

_paramproClass = _tbaritemsitems[2]value;

_paramproName = _tbaritemsitems[5]value;

_paramisShow = _tbaritemsitems[7]value;

// thisstore1load(1);

this_baseParam = _param

thisreLoadData();

},

onReset : function() {

var _tbar = ExtgetCmp('TBAR_PROTREEGRID');

_tbaritemsitems[0]setValue('项目立项');

_tbaritemsitems[2]setValue('');

_tbaritemsitems[5]setValue('');

this_baseParam = {

process : '项目立项',

isShow : 'false'

};

},

onAdvSearch : function() {

new ProQueryWin( {

_grid : this,

_process : '项目立项'

})show();

}

});

$(document)ready(function(){

var idsstr = "";

var isc = "";

$("#a input[name=chkId]")each(function(){ //遍历table里的全部checkbox

idsstr += $(this)val() + ","; //获取所有checkbox的值

if($(this)attr("checked")) //如果被选中

isc += $(this)val() + ","; //获取被选中的值

});

if(idsstrlength > 0) //如果获取到

idsstr = idsstrsubstring(0, idsstrlength - 1); //把最后一个逗号去掉

if(isclength > 0) //如果获取到

isc = iscsubstring(0, isclength - 1); //把最后一个逗号去掉

alert("所有checkbox的值:" + idsstr);

alert("被选中checkbox的值:" + isc);

});

以上就是关于jstree中想要选中子节点,父节点就会变成选中状态,需要如何修改。全部的内容,包括:jstree中想要选中子节点,父节点就会变成选中状态,需要如何修改。、(JQuery)如何给JsTree生成的树的每个节点添加上自定义的右键菜单、jstree中是否提供了方法判断一个根节点有多少子节点看了参考文档貌似没有。求高手赐教等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9321008.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-27
下一篇 2023-04-27

发表评论

登录后才能评论

评论列表(0条)

保存