说起这个layui就是一个坑,在网上搜索很多这方面的资料然后还是没有解决!最后直接复制官网的没想到竟然后台可以取值了,后台我是用控制器获取值然后再传到前台的后台数据为josn是官方的格式
废话不多说,直接上代码
1.引用样式
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css" />
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/layui/layui.js"></script>
<script src="~/Content/js/jquery-2.1.1.js"></script>
<script src="/Content/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
<div class="page-content-wrap">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline tool-btn">
<button class="layui-btn layui-btn-small layui-btn-normal go-btn hidden-xs" data-url="AddUser"><i class="layui-icon"></i></button>
<button class="layui-btn layui-btn-small layui-btn-warm listOrderBtn hidden-xs" data-url="/admin/category/listorderall.html"><i class="iconfont"></i></button>
</div>
<div class="demoTable">
搜索ID:
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
</div>
</form>
<div class="layui-form" id="table-list">
<div class="layui-form">
<table id="demo" lay-filter="test"></table>
</div>
</div>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#demo'
, url: '/UserInfo/QueryUser'
, id: 'test'
, height: 'full-200'
, method: 'post' //提交方式
, limit: 5//一页能够显示的最大数目
, toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
, defaultToolbar: ['filter', 'exports', 'print'] //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
, title: '用户数据表'
, cols: [[
{ type: 'checkbox', fixed: 'left' }
, { field: 'userId', width: 100, title: 'userId', sort: true }
, { field: 'userNo', width: 100, title: '用户名称', sort: true }
, { field: 'userName', width: 100, title: '姓名', sort: true }
, { field: 'Addresss', width: 100, title: '地址', sort: true }
, { field: 'hobby', width: 100, title: '爱好', sort: true }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
]]
, page: true
});
//搜索 这是重要
var $ = layui.$, active = {
reload: function () {
var demoReload = $('#demoReload');
//执行重载
table.reload('test', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
id: demoReload.val()
}
}, 'data');
}
};
// 这个点击事件必须写进去 不然执行不到 这点是最坑的地方 然后其余仿照写 没有问题
$('.demoTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//头工具栏事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了:' + data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选' : '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
//监听行工具事件
table.on('tool(test)', function (obj) {
var data = obj.data;
//console.log(obj)
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
});
} else if (obj.event === 'edit') {
layer.prompt({
formType: 2
, value: data.userName
}, function (value, index) {
obj.update({
userName: value
});
layer.close(index);
});
}
});
});
</script>
最后还有一个小问题 就是button哪里 如果不加属性type="button" 会导致进入二次后台 第一次有值 第二次没有