前端数据绑定，列表部分数据不显示问题解决 (转)jQuery LigerUI 插件介绍及使用之ligerTree,ligerMenu 右键菜单

原文链接：

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

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

https://blog.csdn.net/qq873113580/article/details/39582275

右键菜单：https://www.cnblogs.com/rdchen/p/10784544.html

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

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

将nodeWidth的值增大就解决了。

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

1、引入库文件

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

加入HTML

调用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' });

场景五：动态增加节点：

场景六：删除节点：

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);
}

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

//修改树的右键菜单

$("#tree1").ligerTree({

onContextmenu: function (node, e) {
menuNodeID = node.data.id;
menuNodeParentID = node.data.parentid;
menuNodeText = node.data.text;
menu.show({ top: e.pageY, left: e.pageX });
return false;
}
});

四，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

二、LigerUi之ligerMenu 右键菜单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../js/ligerui.min.js"></script>
<script type="text/javascript" src="../js/plugins/ligerMenu.js.js"></script>
<script>
var menu;
function onclick11(item, i) {
alert(item.text);
}
function onclick112() {
menu.hide();
}
$(function() {
menu = $.ligerMenu({
top : 100,
left : 100,
width : 120,
items : [ {
text : '增加',
click : onclick11,
icon : 'add'
}, {
text : '修改',
click : onclick11
}, {
line : true
}, {
text : '查看',
click : onclick11,
children : [ {
text : '报表',
click : onclick11
}, {
text : '导出',
children : [ {
text : 'Excel',
click : onclick11
}, {
text : 'Word'
} ]
} ]
}, {
text : '关闭',
click : onclick112
} ]
});
menu.show();
$(document).bind("contextmenu", function(e) {
menu.show({
top : e.pageY,
left : e.pageX
});
return false;
});
});
</script>
<style type="text/css">
#menu1,.l-menu-shadow {
top: 30px;
left: 50px;
}
#menu1 {
width: 200px;
}
</style>
</head>
<body>
<div id="div1" style="width: 400px; height: 400px;"></div>
</body>
</html>