【layui】下拉控件dropdown简单的使⽤
官⽅⽹站地址:
1.代码
layui.use(['index', 'table', 'form', 'dropdown'], function () {
var $ = layui.$
, form = layui.form
, admin = layui.admin
, table = layui.table
, dropdown = layui.dropdown;
elem: '#table-datalist'
, url: '/Console/ECUser/GetListJson'
, limit: 10
, title: ''
, where: {}
,
cols: [[
{ type: 'checkbox', fixed: 'left' }
, { field: 'id', title: '编号', width: 60 }
, { field: 'countryCode', title: '区号', width: 60 }
, { field: 'phone', title: '⼿机号' }
, {
field: 'statusKey', title: '状态', width: 120, templet: function (res) {
if (res.statusKey == "allow_login")
return '<input type="checkbox" name="status" lay-skin="switch" lay-text="允许登录|禁⽌登录" lay-filter="table-state" value="' + res.id + '" checked="checked">'
else
return '<input type="checkbox" name="status" lay-skin="switch" lay-text="允许登录|禁⽌登录" lay-filter="table-state" value="' + res.id + '">' }
}
, { fixed: 'right', width: 150, title: '详情信息', toolbar: '#table-datalist-detail' }
]]
, done: function (res) {
tableData1 = res;
dropdown.suite();
for (var i = 0; i < tableData1.data.length; i++) {
var arr = event.split("-");
switch (arr[1]) {
case "user":
break;
case "assets":
break;
case "target":
break;
case "funding":
break;
}
});
}
}
, page: true
});
}
2.html
<script type="text/html" id="table-datalist-detail">
<button class="layui-btn layui-btn-xs" lay-filter="ft{{d.id}}" lay-dropdown="{align:'right',menus:[{layIcon:'layui-icon-username',txt:'⽤户详情',event:'{{d.id}}-user'},{layIcon:'layui-icon-form',txt:'资产列表',event:'{{d.id}}-assets'},{layIcon:'layui-icon-form',txt:'标的列表',event:'{{d.id}}-target'},{layIcon:'layui-icon-form',txt:'资⾦记录',event:'{{d.id}}-funding'}]}">
<span>操作</span>
<i class="layui-icon layui-icon-triangle-d"></i>
</button>
layui框架怎么用
</script>