前端数据绑定,列表部分数据不显示问题解决 (转)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)
<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
<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(); |
效果图
三,常用场景
场景一:不使用复选框:
场景二:不使用复习框和图标:
效果如图:
场景三:配置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参数加载树:
场景五:动态增加节点:
$(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);
}
场景六:删除节点:
{
var node = manager.getSelected();
if (node)
manager.remove(node.target);
else
alert('请先选择节点');
}
场景七:折叠/展开节点:
{
manager.collapseAll();
}
function expandAll()
{
manager.expandAll();
}
场景八:事件支持:
{
$("#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);
}
场景九:异步动态加载节点
$(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" }
]);
}
}
//修改树的右键菜单
$("#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文档
- 描述:
- 使一段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来阻止继续展开
|
null |
p.onExpand | {Function} | 展开事件
|
null |
p.onBeforeCollapse | {Function} | 折叠前事件,可以通过返回false来阻止继续折叠
|
null |
p.onCollapse | {Function} | 折叠事件
|
null |
p.onBeforeSelect | {Function} | 选择前事件,可以通过返回false来阻止继续选择
|
null |
p.onSelect | {Function} | 选择事件
|
null |
p.onCheck | {Function} | 复选框事件
|
null |
p.onSuccess | {Function} | 异步加载数据成功事件 | null |
p.onError | {Function} | 异步加载数据失败事件
|
null |
- 返回值:
- {jQuery} jQuery对象
append(parentNode, newdata)
|
clear()
|
|
demotion(treenode)
|
|
|
getData()
|
getParentTreeItem(treenode, level)
|
|
hasChildren(treenode)
|
|
loadData(node, url, param)
|
remove(node)
|
upgrade(treenode)
|
- 描述:
- 增加节点集合
- 参数列表:
参数名 | 类型 | 描述 | 默认值 |
parentNode | {Object} | 节点(DOM 对象 标签为li),加载的数据将增加到这个节点下面 | |
newdata | {Array} | 节点数据的集合,该参数为数组 |
- 描述:
- 清空
- 描述:
- 全部节点都折叠
- 描述:
- 降级为叶节点级别
- 参数列表:
参数名 | 类型 | 描述 | 默认值 |
treenode | {Object} | 节点(DOM 对象 标签为li) |
- 描述:
- 全部节点都展开
- 描述:
- 获取选择的行(复选框)
- 返回值:
- {Array} Nodes 每一个Node包括的参数有:data(数据源),target(DOM 对象 标签为li)
- 描述:
- 获取树的数据源
- 返回值:
- {Array} Tree Data Object
- 描述:
- 获取父节点
- 参数列表:
参数名 | 类型 | 描述 | 默认值 |
treenode | {Object} | 节点(DOM 对象 标签为li) | |
level | {Object} | 获取第N级别的父节点(选填,不填时表示上一级父节点) |
- 返回值:
- {Bool} hasChildren
- 描述:
- 获取选择的行
- 返回值:
- {Object} Node 节点包括的参数有:data(数据源),target(DOM 对象 标签为li)
- 描述:
- 是否包含子节点
- 参数列表:
参数名 | 类型 | 描述 | 默认值 |
treenode | {Object} | 节点(DOM 对象 标签为li) |
- 返回值:
- {Bool} hasChildren
- 描述:
- 加载数据
- 参数列表:
参数名 | 类型 | 描述 | 默认值 |
node | {Object} | 节点(DOM 对象 标签为li),加载的数据将增加到这个节点下面 | |
url | {String} | 要加载数据的URL | |
param | {String} | 提交数据的附件的参数 |
- 描述:
- 删除节点
- 参数列表:
参数名 | 类型 | 描述 | 默认值 |
node | {Object} | 节点(DOM 对象 标签为li) |
- 描述:
- 升级为父节点级别
- 参数列表:
参数名 | 类型 | 描述 | 默认值 |
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>