layui xm-select tree
var xms;//定义全局变量
layui.config({
base:'fam/js/'
}).extend({
xmSelect:'xm-select'
}).use(["xmSelect"], function(){
xms= layui.xmSelect ;
});
//扁平化将json转为tree结构
function parentson(datas){
var map = {};
//所有的value为key 放入到map
datas.forEach(function (item) {
map[item.value] = item;
});
var val = [];
//添加
datas.forEach(function (item) {
var parent = map[item.pid];
if (parent){
(parent.children || ( parent.children = [] )).push(item);
} else {
val.push(item);
}
});
return val;
};
function myAjax(url,typ,param,isTree){debugger;
var ps;
$.ajax({
url:url,
type:typ,
dataType:"json", //返回格式为json
async:false,//请求是否异步，默认为异步，这也是ajax重要特性
data:param,
success:function(req){
if(isTree){
ps=parentson(req.rows);
}else{
ps=req.rows
}
},error:function(){
alert("出错了！");
}
})
return ps;
};
function myRender(id,isRadio){
var myhand= xms.render({
el: '#'+id,
style: {
minHeight:'27px' ,
},
filterable: true,
size:'mini',
name: id,
radio: isRadio,
clickClose: isRadio,
model: {
label: {
type: 'block',
block: {
showCount: 1,
showIcon: false,
}
}
},
data: []
})
return myhand;
}
function myRenderTree( id,isRadio){
var myhand= xms.render({
el: '#'+id,
style: {
minHeight:'27px' ,
},
filterable: true,
autoRow:false,
size:'mini',
name: id,
radio: isRadio,
clickClose: isRadio,
model: {
label: {
type: 'block',
block: {
showCount: 1,
showIcon: true,
}
}
},
tree: {
show: true,
showFolderIcon: true,
showLine: false,
indent: 20,
strict: false,//
clickCheck: false,
lazy: true,
load: function(item, cb){
setTimeout(function(){
if(item.name.endsWith('2')){
return cb([]);
}
cb([
{name: item.name + 1, value: item.value + '1', children: [] },
{name: item.name + 2, value: item.value + '2', children: [] },
])
}, 500)
}
},
data: []
});
return myhand;
}
<!DOCTYPE>
<html lang="zh-cn">
<head>
<base href="${ctx}">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="${ctx}/js/newSelect.js"></script>
</head>
<body>
<div class="layui-inline" style="margin-top: 20px">
<label class="layui-form-label" >哈哈哈哈0</label>
<div class="layui-input-inline">
<div id ='test0' name ='test0' class="xm-select-demo"></div>
</div>
</div>
<div class="layui-inline" style="margin-top: 20px">
<label class="layui-form-label" >哈哈哈哈1</label>
<div class="layui-input-inline">
<div id ='test1' name ='test1' class="xm-select-demo"></div>
</div>
</div>
<div class="layui-inline" style="margin-top: 20px">
<label class="layui-form-label" >哈哈哈哈2</label>
<div class="layui-input-inline">
<div id ='test2' name ='test2' class="xm-select-demo"></div>
</div>
</div>
<div class="layui-inline" style="margin-top: 20px">
<label class="layui-form-label" >哈哈哈哈3</label>
<div class="layui-input-inline">
<div id ='test3' name ='test3' class="xm-select-demo"></div>
</div>
</div>
<div class="layui-inline" style="margin-top: 20px">
<label class="layui-form-label" >ppppp</label>
<div class="layui-input-inline">
<div id ='testp' name ='testp' class="xm-select-demo"></div>
</div>
</div>
</form>
<button class="btn" id="mdemo">获取选中值</button>
<script type="text/javascript">
layui. use(["form","laytpl" ], function(){
var laytpl = layui.laytpl;
form = layui.form;
var url ="${ctx}/pc/business/common/getdatalist.do?cmd=8600";
var urlp ="${ctx}/pc/business/common/getdatalist.do?cmd=8601";
//参数解释说明
//请求路径url 请求方式 请求参数 是否返回children格式
var datas = myAjax(url,"POST","",true);
var datas2 = myAjax(url,"POST","",false);
var param={"roleid":"fd6383de4c564ee798efdaeae258d12a"};
var datasp = myAjax(urlp,"POST",param,false);
//参数解释说明
// xm-select引入 绑定dom的id 是否单选
var mh0= myRenderTree("test0",false );
mh0.update({
data: datas,
autoRow: true,
})
var mhp= myRender("testp",false,param);
mhp.update({
data: datasp,
autoRow: true,
})
var mh1= myRenderTree("test1",false );
mh1.update({
data: datas,
autoRow: true,
})
var mh2= myRender("test2",true );
mh2.update({
data: datas,
autoRow: true,
})
var mh3= myRenderTree("test3",true );
mh3.update({
data: datas2,
autoRow: true,
})
$('#mdemo').click (function(){
console.log($("#mysearch").serializeObject(),'============',$("#mysearch")[0])
console.log(layVerify($("#mysearch")[0]));
//获取当前多选选中的值
//var selectArr = mdemo.getValue();
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号