ExtJs动态生成treepanel的Json格式

在节点中加上"checked"属性，会自动生成checkbox。

获取选中节点

var nodeArray = "";
var nodesObj = mytree.getChecked();

var i;var length=nodesObj .length;
for (i = 0; i < length; i++) {
nodeArray += nodesObj[i].id + ',';   //允许多选的情况。如果不允许多选，就直接nodesObj[i].id
}

nodeArray = nodeArray.substring(0, nodeArray.length - 1);

Json格式如下：

[{
"text": "To Do",
"cls": "folder",
"expanded": true,
"children": [{
"text": "Go jogging",
"leaf": true,
"checked": true
},{
"text": "Take a nap",
"leaf": true,
"checked": false
},{
"text": "Climb Everest",
"leaf": true,
"checked": false
}]
},{
"text": "Grocery List",
"cls": "folder",
"children": [{
"text": "Bananas",
"leaf": true,
"checked": false
},{
"text": "Milk",
"leaf": true,
"checked": false
},{
"text": "Cereal",
"leaf": true,
"checked": false
},{
"text": "Energy foods",
"cls": "folder",
"children": [{
"text": "Coffee",
"leaf": true,
"checked": false
},{
"text": "Red Bull",
"leaf": true,
"checked": false
}]
}]
},{
"text": "Remodel Project",
"cls": "folder",
"children": [{
"text": "Finish the budget",
"leaf": true,
"checked": false
},{
"text": "Call contractors",
"leaf": true,
"checked": false
},{
"text": "Choose design",
"leaf": true,
"checked": false
}]
}]

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

    JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

    在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表示树的节点.在ExtJS中,有两种类型的树节点.一种节点是普通的简单树 节点,由Ext.tree.TreeNode定义,另外一种是需要异步加载子节点信息的树节点,该类由Ext.tree.AsyncTreeNode定 义. 在数据中, text 显示文字, leaf 节点 , children 子节点,expanded 展开 var store = Ext.create('Ext.data.TreeStore', { root

  • extjs4 treepanel动态改变行高度示例

    extjs4 treepanel动态改变行高度示例

      复制代码 代码如下: //css代码 .x-row-class{ line-height:30px; } //js代码 },{ text: '技能分配', flex: 1, width:150, dataIndex: 'skillDistribut', sortable: true, renderer:function(value, metaData, record, rowIndex, columnIndex, store){ metaData.tdAttr= "data-qtip='&q

  • extjs关于treePanel+chekBox全部选中以及清空选中问题探讨

    复制代码 代码如下: //树 var treePanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:{}, listeners:{ render: function() { authorityTree(treePanel); /*渲染树*/ }, checkchange: function(node, state) {

  • 关于extjs treepanel复选框选中父节点与子节点的问题

    关于extjs treepanel复选框选中父节点与子节点的问题

     extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点.取消所有子节点时,才能取消根节点. 复制代码 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:new Ext.tree.AsyncTreeNode({}), listeners:{ "checkchange": f

  • 层序遍历在ExtJs的TreePanel中的应用

    层序遍历在ExtJs的TreePanel中的应用

    原理非常简单,就是树的层序遍历,在遍历过程中遇到第一个叶子节点即完成工作. 效果如下图:代码如下: 复制代码 代码如下: var currentRootNode = null;//当前选择的根节点 function NodeClass() { //定义一个节点类 var nodeValue = null; var nextNode = null;//下一个节点 } function InitQueue(queue) { //初始化一个队列 queue = new NodeClass();//头节

  • Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能.其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text.id.icon.checked等.异步树Ext.tree.AsyncTreeNode.树加载器Ext.tree.TreeLoader.下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果. 在 treepanel 里添加以下代码即可实现级联选中效果 主要实现了以下效果: 1.点击父级批量设置所有子节点选中状

  • ExtJs动态生成treepanel的Json格式

    在节点中加上"checked"属性,会自动生成checkbox. 获取选中节点 var nodeArray = ""; var nodesObj = mytree.getChecked(); var i;var length=nodesObj .length; for (i = 0; i < length; i++) { nodeArray += nodesObj[i].id + ','; //允许多选的情况.如果不允许多选,就直接nodesObj[i].id

  • Angularjs根据json文件动态生成路由状态的实现方法

    项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui-router.js两个js文件,如下例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <script

  • ajax请求后台得到json数据后动态生成树形下拉框的方法

    如下所示: <select id="cc" class="easyui-combotree" style="width:580px;" name="rempId" data-options="required:true"></select> <script> $(function(){ $.ajax({ url:"departmentAction_getAllD

  • js 动态生成json对象、时时更新json对象的方法

    函数不需要 return,因为 json 对象会被函数直接修改. var str1 = {"name": "apple", "sex": "21"}; // 参数:prop = 属性,val = 值 function createJson(prop, val) { // 如果 val 被忽略 if(typeof val === "undefined") { // 删除属性 delete str1[prop]

  • 谈谈iOS开发之JSON格式数据的生成与解析

    本文将从四个方面对IOS开发中JSON格式数据的生成与解析进行讲解: 一.JSON是什么? 二.我们为什么要用JSON格式的数据? 三.如何生成JSON格式的数据? 四.如何解析JSON格式的数据? JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中.这时我们就需要一款在线校验工具 BeJson. 一.JSON是什么? JSON(JavaScript Object Notation) 是一种轻量级的数

  • Java Servlet生成JSON格式数据并用jQuery显示的方法

    本文实例讲述了Java Servlet生成JSON格式数据并用jQuery显示的方法.分享给大家供大家参考,具体如下: 1.Servlet通过json-lib生成JSON格式的数据 import java.io.IOException; import java.io.PrintWriter; import java.util.*; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet;

  • 使用Go语言解析动态JSON格式的方法

    通常使用Golang encoding/json 标准库可以方便的编码/解析JSON数据,但是前提需要定义struct数据结构.特别是解析未知结构的JSON数据时,原有方法很难满足需求了,本文主要介绍动态解析JSON格式. Go语言的JSON 库 Go语言自带的JSON转换库为 encoding/json 1.1)其中把对象转换为JSON的方法(函数)为 json.Marshal(),其函数原型如下 func Marshal(v  interface{}) ([]byte, error) 也就是

  • Ajax获取php返回json数据动态生成select下拉框的实例

    功能:根据选择不同层次,在专业下拉框中动态生成对应分类的专业. HTML: <label>层次</label> <select name="level" id="level"> <option value="1">本科</option> <option value="2">高职(专科)</option> </select> <

  • ExtJS下书写动态生成的xml(兼容火狐)

    ExtJS下书写动态生成的xml(兼容火狐)

    复制代码 代码如下: function getXml() { //获取输入值 var name = textName.getValue(); var pwd = textPwd.getValue(); //初始化对象 var xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.async="false";//取消xml在还没有完成数据完整填写就提交的动作 //

  • 实例详解JSON数据格式及json格式数据域字符串相互转换

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成. 基础结构 JSON建构于两种结构: 1. "名称/值"对的集合(A collection of name/value pairs).不同的语言中,它被理解为对象(object),记录(record),结构(struct),字典(dictionary),哈希表(hash t

随机推荐