一、简单
var treedata=[];
tree.render({
elem: '#addLeftType',
id: 'demoId',
data: treedata,
showCheckbox: true,
oncheck: function(obj){
console.log(obj.data); // 得到当前点击的节点数据
console.log(obj.checked); // 节点是否被选中
console.log(obj.elem); // 得到当前节点元素
},
edit: ['add', 'update', 'del'] // 开启节点的右侧操作图标
});
get_tree_data(0);//初始化
// 使用 layui 的 ajax 方法来获取树节点数据
function get_tree_data(id){
$.ajax({
type:'post',
url: "{:url('classif_listjson')}",
data: {id:id},
success:function(response){
tree.reload('demoId', {
data:response,
});
tree.setChecked('demoId', [1,2]); //单个勾选 id 为 1 的节点
}
});
};
初始化 默认选中：只能这个位置才能生效
tree.setChecked('demoId', [1,2]); //单个勾选 id 为 1 的节点
二、复杂（只能单选，二级）：增加、编辑、删除功能
//tree组件 操作 开始
var show_btn = [];
var show_btn_ids='';
var array_ids=[];
function get_tree_id(checkarr){
for(var i=0;i<checkarr.length;i++){
if(checkarr[i].children){
get_tree_id(checkarr[i].children)
}else{
show_btn_ids += checkarr[i].id+',';
array_ids.push(checkarr[i].id);
$("#classify_ids").val(show_btn_ids);
}
}
}
var treedata=[];
//用来修改后的节点数据
var update_treedata=[];
//渲染
var inst1 = tree.render({
elem: '#addLeftType' //绑定元素
,id: 'demoId'
,edit: ['add', 'update', 'del']
,showCheckbox: true
,data:treedata
,click: function(obj){
//layer.msg(JSON.stringify(obj.data));
},oncheck: function(obj){
// console.log(obj); //得到当前点击的节点数据
show_btn_ids = '';
$("#classify_ids").val('');
$("#showLeftType").html('');
//获得选中的节点
var checkData = tree.getChecked('demoId');
$("#showLeftType").html("");
//console.log(checkData.length)
// 取消其它选中，只能单选
uncheckAllExceptOne()
get_tree_id(checkData);
},operate: function(obj){
var type = obj.type; //得到操作类型：add、edit、del
var data = obj.data; //得到当前节点的数据
var elem = obj.elem; //得到当前节点元素
//Ajax 操作
var id = data.id; //得到节点索引
var all_id = data.pid_all.split(",");
if(type === 'add'){ //增加节点
addType(id,all_id);
//返回 key 值
return '增加';
} else if(type === 'update'){ //修改节点
var title = elem.find('.layui-tree-txt').html()
$.ajax({
type: "post",
url: "{:url('classif_add')}",
dataType:"json", //返回格式为json
data: {id:id,title:title,field:'name',action:'ajax_update'},
success: function(data){
layer.msg(data.msg);
$("#"+id).text(title);
},
error: function(){
layer.msg('更新失败!');
}
});
} else if(type === 'del'){ //删除节点
$.ajax({
type: "post",
url: "{:url('classif_add')}",
dataType:"json", //返回格式为json
data: {id:id,del_is:1,action:'ajax_del'},
success: function(data){
layer.msg(data.msg);
if(data.code==200){
//获得选中的节点
var checkData = tree.getChecked('demoId');
//清空选中
array_ids=[];
//重新获取选中id
get_tree_id(checkData);
//treedata 结构数据，id递归删除对应id，array_ids给默认选中的id加上
update_treedata= delete_tree_id(treedata,id,array_ids,"del",0,all_id);
//重新渲染组件
tree.reload('demoId', {data:update_treedata});
//清空
$("#showLeftType").html("");
//再次获得选中的节点
var checkData = tree.getChecked('demoId');
//再次清空选中
array_ids=[];
//再次重新获取选中id
get_tree_id(checkData);
}
},
error: function(){
layer.msg('更新失败!');
}
});
};
}
});
//取消除了当前选中所有选项
function uncheckAllExceptOne(checkboxId) {
var checkboxes = document.querySelectorAll('#addLeftType input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
}
function get_page_data(id){
$.ajax({
type:'post',
url: '{:url('classif_listjson')}',
data: {id:id},
success:function(response){
treedata = response.data;
if(response.code!=200){
treedata =[{title:response.msg,id:99999999,children:[]}];
}
tree.reload('demoId', {
data:treedata
});
{notempty name="$rs"}
tree.setChecked('demoId', [{$rs['classify1']},{$rs['classify2']}]); //单个勾选 id 为 1 的节点
{/notempty}
}
});
};
var p_id=0;
var add_terr_item_title="未命名";
get_page_data({$id});
tree.setChecked('demoId', [1, 2]); // 批量勾选 id 为 1,3 的节点
//操作节点type：del删除 add 添加
function delete_tree_id(data,id,array_ids,type,addid,all_id){
var is_data=data;
var one_data=[];
var p_spread=true;
for(var i=0;i<data.length;i++){
if(id==data[i].id&&type=="del"){
is_data.splice(i,1);
}else if(type=="add"&&(id==data[i].id)){
if(is_data[i].children){
is_data[i].children.push({id:addid,title:add_terr_item_title,pid_all:all_id.toString()+','+addid});
}else{
is_data[i].children=[];
is_data[i].children.push({id:addid,title:add_terr_item_title,pid_all:all_id.toString()+','+addid});
}
}
for (let index = 0; index < array_ids.length; index++) {
var acid = array_ids[index];
if(data[i]&&acid==data[i].id){
if(is_data[i]){
is_data[i].checked=true;
}
}
}
//父节点展开
if(data[i]&&data[i].id==id){
is_data[i].spread=p_spread;//父节点展开
}
if(all_id){
for (let k = 0; k <all_id.length; k++) {
const sp_id = all_id[k];
if(data[i]&&sp_id==data[i].id){
is_data[i].spread=p_spread;//父节点展开
}
}
}
if(data[i]&&data[i].children){
delete_tree_id(data[i].children,id,array_ids,type,addid,all_id);
}
}
one_data=is_data;
return one_data;
}
function addType(pid,all_id){
var typetitle = $("#typetitle").val();
var title
if(pid==p_id||pid==""||pid==0||pid==null||pid==undefined){
title = typetitle? typetitle:add_terr_item_title;
}else{
title=add_terr_item_title;
}
add_terr_item_title=title;
$.ajax({
type: "post",
url: "{:url('classif_add')}",
dataType:"json", //返回格式为json
data: {pid:pid,title:title,level_limit:{$level_limit}},
success: function(data){
layer.msg(data.msg);
if(data.code==200){
//获得选中的节点
var checkData = tree.getChecked('demoId');
//清空选中
array_ids=[];
//重新获取选中id
get_tree_id(checkData);
//treedata 结构数据，id递归删除对应id，array_ids给默认选中的id加上,all_id
update_treedata= delete_tree_id(treedata,pid,array_ids,"add",data.add_id,all_id);
if((pid==0||pid==null||pid==undefined||pid==""||pid==p_id)){
update_treedata.push({id:data.add_id,title:add_terr_item_title,pid_all:p_id.toString()+','+data.add_id});
}
//重新渲染组件
tree.reload('demoId', {data:update_treedata});
//清空
$("#showLeftType").html("");
//再次获得选中的节点
var checkData = tree.getChecked('demoId');
//再次清空选中
array_ids=[];
//再次重新获取选中id
get_tree_id(checkData);
add_terr_item_title="未命名";
}else{
//重新渲染组件
tree.reload('demoId');
}
},
error: function(){
layer.msg('更新失败!');
}
});
}
$("#addType").click(function(){
//更新后台数据
addType(p_id,0);
})
//tree组件 操作 结束
去掉uncheckAllExceptOne()就可以多选了
表单提交的一些判断
/* 监听提交 */
form.on('submit(component-form-demo1)', function(data){
/* 启动加载... */
var indexload = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
// 加入分类
var data = JSON.parse(JSON.stringify(data.field));
var checkData = tree.getChecked('demoId');
if (Object.keys(checkData).length === 0) {
layer.close(indexload);/* 关闭加载弹层... */
layer.msg('请选择分类');
return
}
var classify1 = checkData[0]['id'];
var classify2 = checkData[0]?.children?.[0]?.id;;
data.classify1=classify1;
data.classify2=classify2;
var addData = JSON.stringify(data);
$.ajax({
url: "{:url('add')}",
type: "post",
dataType:"json", //返回格式为json
data: {data:addData},
success: function(data) {
layer.close(indexload);/* 关闭加载弹层... */
layer.msg(data['msg']);
/* 延迟2秒刷新... */
if(data['code']==200){
setTimeout(function(){
window.location.reload()
},2000)
}
},
error: function() {
layer.close(indexload);/* 关闭加载弹层... */
layer.msg('{$form_server_error_title}');
}
});
});