使用treeSelect 树形下拉选择器优化上级菜单选择表单

水月洞天 8月前 679

treeSelect.js下载地址:https://fly.layui.com/extend/treeSelect/

效果图:

<?php
//-------------------------------步骤1:添加函数--------------------------------------
//注意:list_to_tree()函数yzncms系统有,这里就显示了
//在公共函数文件添加下面代码(也可以在模块公共函数文件里添加)
/**
 * 修改列表数组字段名
 * @param array $list		列表数组
 * @param string $old 		旧字段
 * @param string $new 		新字段
 * @return array
 */
function eidt_field($list,$old,$new){
	$arr = [];
	foreach ($list as $key => $obj) {
        $obj[$new] = $obj[$old];  
		unset ($obj[$old]);
		$arr[] = $obj;
    }
	return $arr;
}
/**
 * 列表数组添加字段
 * @param array $list		列表数组
 * @param string $key 		字段名
 * @param string $value 	字段值
 * @return array
 */
function add_field($list,$mykey,$value){
	$arr = [];
	//方法1
	foreach ($list as $key => $obj) {
        $obj[$mykey] = $value;  
		$arr[] = $obj;
    }
	return $arr;
}
//-------------------------------步骤2:修改控制器--------------------------------------
//在Menu.php控制器中添加下面代码:
//获取树状数据:返回json数据
public function getTreeData(){
	$condition = [];
	//(注意:如果menu表没有type字段可以把下面这行删掉,最好添加一下,方便区分菜单与行为)
	$condition['type'] = 1;//筛选菜单,屏蔽行为
	$data = Menu_Model::where($condition)
		->field("id,parentid,title")
		->select();
	
	//数据库查询出来的数据可能是对象形式的数据
	//将对象转为json数据,再将json数据转为数组
	$data = json_decode(json_encode($data),true);
	$data = eidt_field($data,$old='title',$new='name');
	$data = eidt_field($data,$old='parentid',$new='pid');
	$data = add_field($data,$mykey='open',$value=false);
	$data = add_field($data,$mykey='checked',$value=false);
	//需要使用echo打印数据,json才能正常使用。
	echo json_encode(list_to_tree($data, $pk = 'id', $pid = 'pid', $child = 'children', $root = 0));
}
//-------------------------------步骤3:修改视图文件--------------------------------------
//修改YZNCMS\application\admin\view\menu\add.html也可以在需要的地方添加表单
//添加树状选择表单
<div class="layui-form-item">
	<label for="" class="layui-form-label">上级菜单</label>
	<div class="layui-input-inline w300">
	   <input type="text" name="parentid" value='0' id="tree" lay-filter="tree" class="layui-input">
	</div>
	<div class="layui-form-mid layui-word-aux">默认为顶级菜单</div>
</div>
//添加layui扩展,同时需要在public/static/libs/layui/extend/下放置treeSelect.js文件
layui.config({
    base: '/static/libs/layui/extend/'
}).extend({
    treeSelect: 'treeSelect'
});
//layui.use中添加扩展
var treeSelect= layui.treeSelect;
//树状表单
treeSelect.render({
	// 选择器
	elem: '#tree',
	// 数据
	data: "{:url('getTreeData')}",//获取指定格式的json数据
	// 异步加载方式:get/post,默认get
	type: 'post',
	// 占位符
	placeholder: '选择所属的上级菜单',
	// 是否开启搜索功能:true/false,默认false
	search: true,
	// 点击回调
	click: function(d){
		$("#tree").val(d.current.id);
		console.log(d);
		console.log(d.current);
	},
	// 加载完成后的回调函数
	success: function (d) {
		console.log(d);
		//选中节点,根据id筛选
		//treeSelect.checkNode('tree', 3);
		//获取zTree对象,可以调用zTree方法
		//var treeObj = treeSelect.zTree('tree');
		//console.log(treeObj);
		//刷新树结构
		//treeSelect.refresh();
	}
});


最新回复 (2)
  • 岩岩 8月前
    0 2
    很棒!这种树形适合栏目分类较多的情况
  • 水月洞天 8月前
    0 3
    岩岩 很棒!这种树形适合栏目分类较多的情况
    树状结构比较好定位,用户体验会比较好
    • YznCMS交流社区
      4
        登录 注册 QQ登录
返回