前端数据绑定，列表部分数据不显示问题解决 jQuery LigerUI 插件介绍及使用之ligerTree

Posted 2023-03-22 yinghualeihenmei

https://www.cnblogs.com/wanshutao/p/3540664.html

https://blog.51cto.com/u_11966318/5375004

突然出现一个列表有几条数据不显示的问题，大部分数据没有问题，只有几条有问题，推测原因应该是数据有问题。

常见数据问题是特殊字符，空格，这几条数据都没有。本地测了下，是数据太长，超过了列表设置的宽度。

将nodeWidth的值增大就解决了。

数据绑定用的技术是ligerTree，这边详细学一下。

1、引入库文件

遵循LigerUI系列插件的设计原则(插件尽量单独)，ligerTree是一个单独的插件，也就是说只需要引入plugins/ligerTree.js和样式css文件就可以使用(当然必须先引入jQuery)  

<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css" rel="stylesheet" type="text/css"/>
<script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

加入HTML  

<ul id="tree1">
<li>
<span>节点1</span>
<ul>
<li>
<span>节点1.1</span>
<ul>
<li><span>节点1.1.1</span></li>
<li><span>节点1.1.2</span></li>
</ul>
</li>
<li><span>节点1.2</span></li>
</ul>
</li>
</ul>

调用ligerTree

$("#tree1").ligerTree();

效果图

三，常用场景

场景一：不使用复选框： 

$("#tree2").ligerTree( checkbox: false );

场景二：不使用复习框和图标： 

$("#tree3").ligerTree( checkbox: false, parentIcon: null, childIcon: null );

效果如图：

场景三：配置data参数加载树：

 

$("#tree1").ligerTree( data: [
text: \'节点1\', children: [
text: \'节点1.1\' ,
text: \'节点1.2\' ,
text: \'节点1.3\', children: [
text: \'节点1.3.1\' ,
text: \'节点1.3.2\'
]
,
text: \'节点1.4\'
]
,
text: \'节点2\' ,
text: \'节点3\' ,
text: \'节点4\'
]
);

场景四：配置url参数加载树：

  

$("#tree1").ligerTree( url: \'json.txt\' );

场景五：动态增加节点：

 

var manager = null;
$(function ()

$(".l-tree").ligerTree( checkbox: true );
manager = $(".l-tree").ligerGetTreeManager();
);
function addTreeItem()

var node = manager.getSelected();
var nodes = [];
nodes.push( text: ‘测试节点’);
if (node)
manager.append(node.target, nodes);
else
manager.append(null, nodes);

场景六：删除节点：

  

function removeTreeItem()

var node = manager.getSelected();
if (node)
manager.remove(node.target);
else
alert(\'请先选择节点\');

场景七：折叠/展开节点：

  

function collapseAll()

manager.collapseAll();

function expandAll()

manager.expandAll();

场景八：事件支持：

  

$(function ()

$("#tree1").ligerTree(

url: \'json.txt\',
onBeforeExpand: onBeforeExpand,
onExpand: onExpand,
onBeforeCollapse: onBeforeCollapse,
onCollapse: onCollapse,
onBeforeSelect: onBeforeSelect,
onSelect: onSelect,
onCheck: onCheck
);
);
function onBeforeSelect(note)

alert(\'onBeforeSelect:\' + note.data.text);
return true;

function onSelect(note)

alert(\'onSelect:\' + note.data.text);

function onBeforeExpand(note)

alert(\'onBeforeExpand:\' + note.data.text);

function onExpand(note)

alert(\'onExpand:\' + note.data.text);

function onBeforeCollapse(note)

alert(\'onBeforeCollapse:\' + note.data.text);

function onCollapse(note)

alert(\'onCollapse:\' + note.data.text);

function onCheck(note, checked)

alert(\'onCheck:\' + note.data.text + " checked:" + checked);

场景九：异步动态加载节点

var manager = null;
$(function ()

$("#tree1").ligerTree(

url: \'json.txt\',
onBeforeExpand: onBeforeExpand
);
manager = $("#tree1").ligerGetTreeManager();
);
function onBeforeExpand(note)

if (note.data.children && note.data.children.length == 0)

//这里模拟一个加载节点的方法，append方法也用loadData(target,url)代替
manager.append(note.target, [
text: note.data.text + "\'s child1" ,
text: note.data.text + "\'s child2" ,
text: note.data.text + "\'s child3"
]);

四，API文档

插件方法详细

jQuery ligerTree(p)

描述:

• 使一段html配置为树结构。

参数列表:

参数名	类型	描述	默认值
p	Object	主要参数
p.url	String	设置一个url用于加载数据	null
p.method	String	提交数据的方式	\'POST\'
p.data	String	设置一个本地数据data用于加载数据	null
p.checkbox	Bool	是否显示复选框	true
p.parentIcon	String	非叶节点的图标	\'folder\'
p.childIcon	String	叶节点的图标	\'leaf\'
p.attribute	Array	属性,获取行数据时很有作用	[\'id\',\'url\']
p.nodeWidth	Int	节点的宽度	70
p.onBeforeExpand	Function	展开前事件,可以通过返回false来阻止继续展开 参数1：node(node.data和node.target) target是DOM对象	null
p.onExpand	Function	展开事件 参数1：node(node.data和node.target) target是DOM对象	null
p.onBeforeCollapse	Function	折叠前事件,可以通过返回false来阻止继续折叠 参数1：node(node.data和node.target) target是DOM对象	null
p.onCollapse	Function	折叠事件 参数1：node(node.data和node.target) target是DOM对象	null
p.onBeforeSelect	Function	选择前事件,可以通过返回false来阻止继续选择 参数1：node(node.data和node.target) target是DOM对象	null
p.onSelect	Function	选择事件 参数1：node(node.data和node.target) target是DOM对象	null
p.onCheck	Function	复选框事件 参数1：node(node.data和node.target) target是DOM对象 参数2：checked 是否选中	null
p.onSuccess	Function	异步加载数据成功事件	null
p.onError	Function	异步加载数据失败事件 参数1：XMLHttpRequest 参数2：textStatus 参数2：errorThrown	null

返回值:

jQuery jQuery对象

ligerTree 接口方法列表 （可通过LigerGetTreeManager获取对象）

append(parentNode, newdata) 增加节点集合

clear() 清空

collapseAll() 全部节点都折叠

demotion(treenode) 降级为叶节点级别

expandAll() 全部节点都展开

getChecked() 获取选择的行(复选框)

getData() 获取树的数据源

getParentTreeItem(treenode, level) 获取父节点

getSelected() 获取选择的行

hasChildren(treenode) 是否包含子节点

loadData(node, url, param) 加载数据

remove(node) 删除节点

upgrade(treenode) 升级为父节点级别

方法详细

append(parentNode, newdata)

描述:

• 增加节点集合

参数列表:

参数名	类型	描述	默认值
parentNode	Object	节点(DOM 对象 标签为li),加载的数据将增加到这个节点下面
newdata	Array	节点数据的集合,该参数为数组

---

clear()

描述:

• 清空

---

collapseAll()

描述:

• 全部节点都折叠

---

demotion(treenode)

描述:

• 降级为叶节点级别

参数列表:

参数名	类型	描述	默认值
treenode	Object	节点(DOM 对象 标签为li)

---

expandAll()

描述:

• 全部节点都展开

---

Array getChecked()

描述:

• 获取选择的行(复选框)

返回值:

Array Nodes 每一个Node包括的参数有：data(数据源),target(DOM 对象 标签为li)

---

Array getData()

描述:

• 获取树的数据源

返回值:

Array Tree Data Object

---

Bool getParentTreeItem(treenode, level)

描述:

• 获取父节点

参数列表:

参数名	类型	描述	默认值
treenode	Object	节点(DOM 对象 标签为li)
level	Object	获取第N级别的父节点(选填，不填时表示上一级父节点)

返回值:

Bool hasChildren

---

Object getSelected()

描述:

• 获取选择的行

返回值:

Object Node 节点包括的参数有：data(数据源),target(DOM 对象 标签为li)

---

Bool hasChildren(treenode)

描述:

• 是否包含子节点

参数列表:

参数名	类型	描述	默认值
treenode	Object	节点(DOM 对象 标签为li)

返回值:

Bool hasChildren

---

loadData(node, url, param)

描述:

• 加载数据

参数列表:

参数名	类型	描述	默认值
node	Object	节点(DOM 对象 标签为li),加载的数据将增加到这个节点下面
url	String	要加载数据的URL
param	String	提交数据的附件的参数

---

remove(node)

描述:

• 删除节点

参数列表:

参数名	类型	描述	默认值
node	Object	节点(DOM 对象 标签为li)

---

upgrade(treenode)

描述:

• 升级为父节点级别

参数列表:

参数名	类型	描述	默认值
treenode	Object	节点(DOM 对象 标签为li)

五,Demo下载

点击下载（已更新源码地址）更多的文档和API后面会渐渐补充,浏览更多的应用请访问http://demo.LigerUI.com