layui.tree 点击搜索功能

分享 未结 0 104
calmlax
calmlax 6天前
悬赏:20飞吻


<div  style="border: 1px solid #ddd;margin-right:20px ">
<div class="demoTable" style="margin: 14px">
<input type="text" class="layui-input" id="treeName" autocomplete="off" />
</div>
<div id="treeBox" style="height: 400px;padding: 5px;border-top: 1px solid #ddd;overflow-y: scroll;overflow-x: hidden;"></div>
</div>
<script>
layui.use(['tree'], function () {
var tree = layui.tree;
$.post("${request.contextPath}/cms/channel/tree",{},function (data) {
tree.render({
elem: '#treeBox' //绑定元素
,showLine: true //是否开启连接线
//, edit: ['add', 'update', 'del'] //开启操作节点的图标
, showCheckbox: false //是否显示复选框
, id: 'treeBox1'
, accordion: true
, isJump: true //是否允许点击节点时弹出新窗口跳转
, onlyIconControl:true
, click: function (obj) {
$('#treeBox').find(".layui-tree-txt").css("color","#555555");
$(obj.elem).find(">.layui-tree-entry>.layui-tree-main>.layui-tree-txt").css("color","#009688");
//$("#cid").val(obj.data.id);
}
, data: data
});
});
//搜索节点值
$("#treeName").keypress(function (e) {
if (e.which == 13) {
queryNode('treeBox',$(this).val());
}
});
$("#treeName").change(function () {
queryNode('treeBox', $(this).val());
});
var queryNodeFun = function (o, v) {
var co = o.find(">.layui-tree-pack>.layui-tree-set");
var _b = false;
if (co) {
$.each(co, function (i, item) {
var b = queryNodeFun($(item), v);
if (b) {
$(item).show();
if (!_b) _b = true;
}
else $(item).hide();
});
}
var txtObj = o.find(">.layui-tree-entry>.layui-tree-main>.layui-tree-txt");
if (txtObj.text().match(v)) {
_b = true;
txtObj.html(txtObj.text().replace(v, '<span style="color:red">' + v + '</span>'));
}
return _b;
};
var queryNode = function (elem, val) {
var obj = $("#" + elem+">.layui-tree>.layui-tree-set");
if (queryNodeFun(obj, val)) {
obj.show();
} else {
obj.hide();
}
};
});
</script>
回帖
  • 消灭零回复