关于layui-绑定数据和搜索问题

Posted 2020-11-16 fgh-rbb

html写法:

<!-- 正文开始 -->
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-body table-tool-mini">
<div class="layui-form toolbar" id="tbToolBar">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label w-auto">账&emsp;号：</label>
<div class="layui-input-inline mr0">
<input name="UsersAccount" class="layui-input" type="text" placeholder="输入账号" />
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label w-auto">用户名：</label>
<div class="layui-input-inline mr0">
<input name="UsersName" class="layui-input" type="text" placeholder="输入用户名" />
</div>
</div>
<div class="layui-inline" style="padding-right: 110px;">
<button class="layui-btn icon-btn" lay-filter="formSubSearchUser" lay-submit>
<i class="layui-icon">&#xe615;</i>搜索
</button>
<button id="btnAddUser" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
<button id="btnSelestDepartment" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>用户配置管理</button>
</div>
</div>
</div>

<table class="layui-table" id="tableUser" lay-filter="tableUser"></table>
</div>
</div>
</div>

 下面是JS

 

var insTb = table.render({
elem: ‘#tableUser‘,
url: ‘../../SystemManage/GetAllUser‘,
page: true,
toolbar: true,
id:"tableuser",
cellMinWidth: 100,
cols: [[
{ type: ‘numbers‘, title: ‘#‘ },
{ field: ‘Account‘, sort: true, title: ‘账号‘ },
{ field: ‘Name‘, sort: true, title: ‘用户名‘ },
{ field: ‘DepartmentName‘, sort: true, title: ‘所在部门‘ },
{
field: ‘CreateTime‘, sort: true, templet: function (d) {
return util.toDateString(d.createTime);
}, title: ‘创建时间‘
},
{ align: ‘center‘, toolbar: ‘#tableBarUser‘, title: ‘操作‘, minWidth: 200 }
]]
});

注意 以上一定要嵌套在 

layui.use([‘layer‘, ‘form‘, ‘table‘, ‘util‘, ‘admin‘, ‘config‘], function () {

var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var util = layui.util;
var admin = layui.admin;
var config = layui.config;

form.render()

XXXX所有写的内容都放在这里

}

下面是搜索 

 

// 用户搜索
form.on(‘submit(formSubSearchUser)‘, function (data) {
console.log(data);
alert(data);
insTb.reload({where: { "UsersAccount": data.field.UsersAccount, "UsersName": data.field.UsersName }
});
});

上面都是前台所有内容 

 

下面开始后台:

 这是后台绑定数据

public string GetAllUser(int page, int limit, string name, string UsersAccount, string UsersName)
{
int total = 0;
var result = AdminUserService.GetDepartUsers(page, limit, name, out total, UsersAccount, UsersName);
var js = JsonConvert.SerializeObject(result);
js.ToString();
String jso = "{"code":0,"msg":"","count":" + total + ","data":" + js + "}";
return jso;
}

记录自己每天所学知识 出入小白,供自己学习参考.

天行健,君子以自强不息!