Html(这个是直接从W3school上粘的)
<body><input type="text" id="findnode"/><input type="button" id="btn" value="btn">
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree">
<li>
<span>My Documents</span>
<ul>
<li data-options="state:'closed'">
<span>Photos</span>
<ul>
<li>
<span>Friend</span>
</li>
<li>
<span>Wife</span>
</li>
<li>
<span>Company</span>
</li>
</ul>
</li>
<li>
<span>Program Files</span>
<ul>
<li>Intel</li>
<li>Java</li>
<li>Microsoft Office</li>
<li>Games</li>
</ul>
</li>
<li>index.html</li>
<li>about.html</li>
<li>welcome.html</li>
</ul>
</li>
</ul>
</div>
</body>
JS代码：
$("#btn").click(function(e) {var arr = $("span[class*='tree-title']")
var str = $("#findnode").val()
if(arr.length<=0)return
var getObj = null
for(i = 0 i < arr.length i++){
if($(arr[i]).html()==str){
getObj = $(arr[i])break
}
}
if(getObj == null){alert("无此节点")}
else{
$(".tree-node-selected").removeClass("tree-node-selected")
getObj = getObj.parent()
getObj.addClass("tree-node-selected")
getObj = getObj.parent().parent()
getObj.css("display","block")
getObj = getObj.parent().children("div")
var collapsed = getObj.children(".tree-collapsed")
if(collapsed){
collapsed.removeClass("tree-collapsed")
collapsed.addClass("tree-expanded")
}
var folderopen = getObj.children(".tree-folder")
if(folderopen){
folderopen.addClass("tree-folder-open")
}
}
})
<script>//初始化datagrid
function InitGrid(queryData) {
$("#grid").datagrid({
url: "/Log/GetLogData",
......//进行一系列 *** 作
queryParams: queryData,//datagrid实现搜索是通过该命令发送检索参数，后端通过request["txtkey"]得到搜索参数值，然后结合sql进行查询 *** 作，最终返回数据显示
.......//进行一系列 *** 作
})
}
function searchKey(){//点击执行函数
var quaryData = {
sea_key: $("#txtkey").val(),//获取文本框搜索值，封装到queryData数组
}
InitGrid(queryData)//执行带参数搜索命令
return //返回结果后结束脚本
}
</script>
html:
<div>
<input type="text" id="txtkey" />
<input type="button" id="btnsearch" value="search" onclick="searchKey()" />
</div>
1、在创建的web项目新建静态页面，并将EasyUI核心CSS和JavaScript文件，注意文件引入的先后顺序。
2、在body插入树形结构数据，设置树容器ID，这里利用的是树的种类来作为树的数据源。
3、为了使单选树改成复选树，需要设置tree的属性checkbox为true，表示可以多选。
4、在tree控件下方插入一个按钮，使用点击事件用于获取tree控件选中的文本内容。
5、下面编写按钮点击事件，获取tree控件选中的节点，并遍历选中树节点打印出节点内容。
6、预览静态页面，点击“选取选中值”按钮，这时会在浏览器下方打印出选中复选框的树节点值。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）