`
ganjuelovejava
  • 浏览: 94019 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论

jstree初始化

阅读更多
<script type="text/javascript">
//对节点初始化
$(function () {
// All those configuration options are documented in the _docs folder
$("#demo")
.jstree({
core : { 
animation : 1    //折叠速度
                   },//点击节点获取子节点
         "core" : { "initially_open" : [ "root2" ] },
         "html_data" : {
         "data" : '<%=htmlSegment%>',
            "ajax" : {
                 "url" : "ajaxFacture.do?libName=<%=libName%>&libId=<%=libId%>&libVersion=<%=libVersion%>", 
                 cache : false,
                 async : true,//动态加载数据
              "data" :  function (n) {
                 return { id : n.attr ? n.attr("id") : 0 };   }   }   },

"themes" : { 

             "theme" : "default", 
             "dots" : false,   //隐藏图标
             "icons" : true
        },
     "plugins" : [ "themes", "html_data","dnd","contextmenu","crrm" ,"checkbox"]

         })//绑定删除事件
.bind("remove.jstree", function (e, data) {
data.rslt.obj.each(function () {

$.ajax({
async : false,
type: 'POST',
url: "NaviUtilServlet.do",
data :
{
"type" : "remove",
"id" : this.id.replace("node_",""),
"libv" : $("#libVersion").val(),
"libid" : $("#libId").val()
},
success : function(falg){
   if(falg == "false"){
      alert("删除失败!");
}}});});
})//绑定修改节点名称事件
.bind("rename.jstree", function (e, data) {
$.ajax({
async : false,
type: 'POST',
url: "NaviUtilServlet.do",
data :
{
"type" : "rename",
"id" : data.rslt.obj.attr("id").replace("node_",""),
"libv" : data.rslt.obj.attr("libv").replace("node_",""),
"libid" : data.rslt.obj.attr("libid").replace("node_",""),
"nodeName" : data.rslt.new_name
},
success : function(falg){
   if(falg == "false"){
      alert("修改名称失败!");
}}});
})//绑定移动节点事件
.bind("move_node.jstree", function (e, data) {
data.rslt.o.each(function () {
         //目标节点
         var targetTopicId = data.rslt.np.attr("id").replace("node_","");
         //下一个兄弟节点
         var nextId = $(this).next("li").attr("id");
         if(nextId == "undefined"){
              nextId = "";
         }
         if(targetTopicId == "demo"){
              targetTopicId = "";
         }
        
       $.ajax({
async : false,
type: 'POST',
url: "NaviUtilServlet.do",
data :
{
"type" : "drag",
"id" : $(this).attr("id").replace("node_",""),
"libv" : $(this).attr("libv"),
"libid" : $(this).attr("libid"),
"nextId" : nextId,
"targetTopicId" : targetTopicId
},
       success : function(falg){
   if(falg == "false"){
      alert("拖动失败!");
}}})});});});
</script>
分享到:
评论

相关推荐

    JsTree 实例使用

    然后在JavaScript中初始化JsTree,提供必要的配置选项: ```javascript $(function () { $('#jstree').jstree({ 'core': { 'data': [ { 'text': '节点1', 'children': [{ 'text': '子节点1' }, { 'text': '子...

    jsTree实例,jsTree实例

    ### jsTree 初始化 在网页中使用 jsTree 需要先引入库文件,然后对目标容器进行初始化。基本代码如下: ```html &lt;script src="jstree.min.js"&gt; &lt;div id="jstree"&gt; $(function() { $('#jstree').jstree({ 'core...

    jsTree asp.net c# jason demo 控件 案例

    前端JavaScript部分则通过Ajax调用上述Web方法获取数据,并将其传递给jsTree初始化: ```javascript $(function () { $('#jstree').jstree({ 'core': { 'data': function (node, callback) { $.ajax({ url: '...

    jsTree中文文档

    jsTree 有多种事件可以监听,比如 `ready.jstree`(初始化完成)、`select_node.jstree`(节点被选中)和 `rename_node.jstree`(节点重命名)。以下是一个监听节点被选中的例子: ```javascript $('#jstree_demo_...

    jsTree中文api

    jsTree的初始化是通过调用`$().jstree()`函数来完成的。你需要指定一些配置选项,例如核心、插件、主题等,来定制你的树结构。例如: ```javascript $("#treeContainer").jstree({ "core": { "data": [ { "id": ...

    使用jsTree实现js树形结构

    使用 JavaScript 来初始化 jsTree,配置数据源和各种选项。 ```javascript $('#jstree').jstree({ 'core': { 'data': [ { "text": "节点1", "children": [{ "text": "子节点1.1" }, { "text": "子节点1.2" }] ...

    jsTree.v.1.0中文文档

    - **配置项**:初始化jsTree时,可以设置各种配置项,如默认展开的节点、可操作的节点类型等。 - **数据源**:jsTree支持多种数据源,如JSON、HTML或XML,用于填充树结构。 3. **API与事件** - **API方法**:如`...

    JsTree 最详细教程及完整实例

    接着,我们在 JavaScript 中初始化 JsTree,定义了数据源,并将它们绑定到 `#jstree` 元素上。 ### 四、进阶技巧 1. **自定义图标(Custom Icons)**:通过 `icon` 属性,你可以为节点设置自定义图标。 2. **事件...

    jsTree操作 jsTree插件简介

    **初始化 jsTree** 在使用 jsTree 时,首先需要对元素进行初始化。以下是一个简单的初始化示例: ```javascript $(function () { $("#demo") .bind("before.jstree", function (e, data) { $("#alog").append...

    jstree中文文档.doc

    当传入的是对象时,它用于初始化新实例或更新现有实例的配置。 11. **$().jstree(arg)**:这里的`arg`参数的处理方式决定了方法的行为。如果是字符串,它会执行命令;如果是对象,它将被用来扩展实例配置;如果没有...

    jstree.min.js.zip

    - **初始化**:使用 jQuery 选择器找到容器元素,并调用 `jstree` 方法,传递配置对象以设置选项和数据源。 - **事件绑定**:根据需求,可以使用 `.on()` 方法绑定 jstree 触发的事件,如节点点击、展开等,执行...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    3. **初始化JSTree**:选择一个DOM元素作为树的容器,并调用`jstree()`函数进行初始化,传入配置对象以设置各种选项和插件。 4. **监听事件**:利用JSTree的事件系统,可以在节点操作时执行相应逻辑。 5. **操作...

    JStree 需要包含的资源

    2. **初始化JStree**: 在HTML页面中,你需要在需要显示树状结构的地方添加一个`&lt;div&gt;`元素,并通过JavaScript来初始化JStree。例如: ```html &lt;div id="jstree_demo_div"&gt; ``` 然后在JavaScript中进行初始化: ...

    jstree目录树控件

    3. **初始化jsTree**:使用`$(selector).jstree(options)`方法初始化树控件,`selector`是树容器的选择器,`options`是一个包含配置项的对象,用于设置初始状态、加载数据的方式、使用的插件等。 4. **处理事件**:...

    JStree(最全)

    - **初始化**: 初始化 JStree 需要在 HTML 元素上应用 `jstree` 类,并在 JavaScript 中调用初始化方法。 ```html &lt;div id="jstree"&gt; $(function () { $('#jstree').jstree({ 'core': { 'data': [{...}] // ...

    jsTree动态tree

    3. 初始化jsTree,指定配置项和数据源。 示例代码: ```html &lt;div id="jstree"&gt; $(function () { $('#jstree').jstree({ 'core': { 'data': [ // JSON数据源 ] } }); }); ``` ### 5. 插件与功能 js...

    jsTree JAVA例子

    接着,在 JavaScript 中初始化 jsTree,设置配置项和数据源: ```javascript $(function () { $('#jstree').jstree({ 'core': { 'data': [ { "text": "节点1", "children": [ { "text": "子节点1" }, { "text":...

    jsTree 大集合

    创建一个 HTML 元素作为 jsTree 的容器,然后使用 `$(selector).jstree(options)` 初始化。例如: ```javascript $("#tree").jstree({ "core": { "data": [ { "id": "ajson1", "text": "Simple root node", ...

    JsTree静态例子

    然后,我们在`$(document).ready()`函数中初始化了JsTree,配置项`'core'`定义了数据源。这里的数据源是一个JSON数组,每个元素表示一个树节点,包含`text`属性(节点文本)和可选的`children`属性(子节点列表)。 ...

    jsTree树形菜单

    然后通过JavaScript引入jsTree库,并调用初始化函数,将这个列表转换为树形菜单。例如: ```html &lt;ul id="jstree_demo_div"&gt; 节点1 子节点1.1 子节点1.2 节点2 $(function () { $("#jstree_demo_div...

Global site tag (gtag.js) - Google Analytics