原码取于Timo框架
<div class="layui-form-item">
<label class="layui-form-label required">父级菜单</label>
<div class="layui-input-inline">
<input class="layui-input select-tree" th:attr="data-url=@{/system/menu/list}, data-value=${pMenu?.id}" type="text" name="pid" placeholder="请输入父级菜单" th:value="${pMenu?.title}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-inline">
<select class="select-sort" name="sort"
th:attr="data-url=@{/system/menu/sortList}, data-id=${menu?.id}, data-sort=${menu?.sort}" lay-verify="sort"></select>
</div>
<div class="layui-input-info">(之后)</div>
</div>
js代码
layui.use(['form'], function () {
window.form = layui.form;
// 初始化排序下拉选项
var pid = $(".select-tree").data('value');
if (pid !== undefined){
sortRender({id: pid});
}
});
// 初始化下拉树
$.fn.selectTree({
rootTree: '顶级菜单',
// 选中后事件
onSelected: sortRender
});
// 更新渲染排序下拉选项
function sortRender(treeNode) {
var pid = treeNode.id;
var sort = $(".select-sort");
var id = sort.data('id') ? sort.data('id') : 0;
var url = sort.data('url') + "/" + pid + "/" + id;
$.get(url, function (result) {
var options = '';
var sortNum = Object.keys(result).length;
if(pid === $(".select-tree").data('value') && sort.data('sort')){
sortNum = sort.data('sort') - 1;
}
result[0] = "首位";
for(var key in result){
var selected = sortNum == key ? "selected=''" : "";
options += "<option value='"+ key +"' " + selected + ">"+ result[key] +"</option>";
}
sort.html(options);
form.render('select');
});
}