1、数据表格
1.1、通过url访问控制层参数时的参数传递
1.1.1、使用where传递多个参数
为数据表格设置数据源时通过where关键字向指定函数传递参数。
例：
//数据源
,url: '${pageContext.request.contextPath}/manageUser/selectUsers' //数据接口 从manageUser控制器中的selectUsers函数获取数据
,limit:5
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
,limits:[5,10,15,20,25,30]
,first: false //不显示首页
,last: false //不显示尾页
}
,where: {key:'1001',postion: 'Teacher'} /
//该函数需要四个参数 limit、page、key、postion其中limit和page用于数据表格的分页，这两个为默认参数，key，和postion是自定义参数，用于筛选满足条件的数据，自定义参数需要使用where传递，多个参数中间用逗号隔开。
//控制层函数
@ResponseBody
@RequestMapping("selectUsers")
public Map<String, Object> selectUsers(int page, int limit, String key, String postion) {
....}
1.1.2、通过异步处理批量删除用户信息是可使用data传递多个参数，该方法类似于使用url传值，参数之间使用&间隔开
url : "${pageContext.request.contextPath}/manageUser/delUsers",
data : "userIds=" + deList+" &postion="+postionValue,
1.1.3、通过url直接向调用函数传递参数
url : "${pageContext.request.contextPath}/manageUser/delUsers?postion=Teacher",或
url : "${pageContext.request.contextPath}/manageUser/delUsers?postion="+变量名,
1.2、使用jquery获取url传递的参数
请求：
url : "${pageContext.request.contextPath}/manageUser/delUsers?postion=Teacher"
<script>
postionValue='${param.postion}'; //设置用户身份
</script>
1.3、layui中通过标签id获取、修改标签值
例：
<input id="getClassName" name="getClassName" lay-verify="required"
autocomplete="off" class="layui-input" type="hidden">
<div class="layui-inline">
<label class="layui-form-label">班级</label>
<div class="layui-input-inline">
<select name="className" id="className" lay-search=""lay-filter="selectClass">
</select>
</div>
</div>
将id为getClassname的中的值赋给id为className的标签。注意：当为标签赋值时应包含该，如：为该赋值：teacher时，中应包含teacher
<script>
$('#className').val($('#getClassName').val());
<dcript>
1.4、layui动态为下拉框设置选项
html代码：
<div class="layui-inline">
<form class="layui-form" action="">
<div class="layui-input-inline" style="width:150px;">
<select name="className" id="className" lay-search="" lay-filter="selectClass" title="请选择班级">
</select>
</div>
</form>
</div>
javascript代码：
$.ajax({ type : 'post',
url : "${pageContext.request.contextPath}/manageUser/selectClass",
//此处也可以通过data传递参数
dataType : "json",
success : function(data) {
// console.log(data);
$("#className").empty(); //通过$("#className")操作<select>中的数据
$("#className").append("<option value=''>请选择班</option>");
var src = '<option value=""></option>';
$.each(data, function(index, data) {
$('#className').append(new Option(data, data));
});
layui.form.render("select");//刷新select选择框渲染 ,更新数据
}
});
1.5、搜索框重载
当输入搜索条件后点击搜索按钮显示符合条件的数据。
过程当输入条件时将条件作为key参数传递到调用函数
例：
html代码：
<div class="studentSelect">
<div class="layui-inline">
<input class="layui-input" name="key" id="key"
placeholder="请输入用户id\用户名\班级名" autocomplete="off"
style="width:200px;">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
<c:if test="${param.postion=='Student'}">
<div class="layui-inline">
<form class="layui-form" action="">
<div class="layui-input-inline" style="width:150px;">
<select name="className" id="className" lay-search=""
lay-filter="selectClass" title="请选择班级">
</select>
</div>
</form>
</div>
</c:if>
</div>
<table class="layui-hide" id="userManage" lay-filter="userManageFilter"></table>
js代码
layui.use(['form','laypage', 'layer', 'table', 'element'], function(){
var $ = layui.jquery;
var form = layui.form
,laypage = layui.laypage //分页
,layer = layui.layer //弹层
,table = layui.table //表格
,element = layui.element //元素操作
,tableObj = table.render({});
//执行一个 table 实例
table.render({
elem: '#userManage'
,height: 420
,url: '${pageContext.request.contextPath}/manageUser/selectUsers' //数据接口 拼接成allTeacher or allStudent
,limit:5
,where: {key:'',postion: postionValue} //初始此页面是 搜索关键字设为空 返回结果为空
//,page:true(自带的这个要注掉)
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
,limits:[5,10,15,20,25,30]
,first: false //不显示首页
,last: false //不显示尾页
}
,title: '用户表'
,toolbar:'#topTool' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
// ,totalRow: true //开启合计行
//表头 filed值貌似只可以采用驼峰命名法且与数据实体属性对应
,cols :[[
{type: 'checkbox', fixed: 'left'},
{field: 'userId', title: '用户ID', width:110},
{field: 'userName', title: '姓名', width:110},
{field: 'className', title: '班级名', width:110},
{field: 'phone', title: '电话号码', width:110},
{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
]]
,id:'selectStudent' //数据重载时 标识id
});
//搜索重载
var selectKey; //搜索的关键字(条件)
var $ = layui.$, active = {
reload: function(){
//执行重载
table.reload('selectStudent', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {key: selectKey,postion:postionValue}
}, 'data');
}
};
//搜索按钮的点击事件
//此处通过class值过滤到指定button并监听click时间
$('.studentSelect .layui-btn').on('click', function(){
selectKey= ($('#key')).val(); //为 搜索关键字赋值
var type = $(this).data('type'); //值为reload
//调用重载函数
active[type] ? active[type].call(this) : '';
});
1.6、动态设置数据表格的列名称
学生信息比教师信息多一个班级名列
代码：
<table class="layui-hide" id="userManage" lay-filter="userManageFilter"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<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 type="text/html" id="topTool">
<div class="layui-inline" lay-event="removeUsers" style="padding-left: 2px;padding-top:2px;">
<span class="layui-badge" style="width: 20px;height: 20px;padding-left: 2px;"><i class="layui-icon layui-icon-delete"></i></span>
</div>
<div class="layui-inline" lay-event="addUser" style="padding-left: 2px;padding-top:2px;">
<span class="layui-badge layui-bg-cyan" style="width: 20px;height: 20px;padding-left: 2px;"><i class="layui-icon layui-icon-add-1"></i></span>
</div>
</script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/tool.js"></script>
<script>
postionValue='${param.postion}'; /* 获取url传递过来的参数 */
var cols_arr=[]; //动态设定表头 集合
cols_arr[0]={type: 'checkbox', fixed: 'left'};
cols_arr[1]={field: 'userId', title: '用户ID', width:110};
cols_arr[2]={field: 'userName', title: '姓名', width:110};
//根据身份信息设置不同的列名
if(postionValue=="Teacher"){
cols_arr[3]={field: 'phone', title: '电话号码', width:110};
cols_arr[4]={fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'};
}else{
cols_arr[3]={field: 'className', title: '班级名', width:110};
cols_arr[4]={field: 'phone', title: '电话号码', width:110};
cols_arr[5]={fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'};
}
layui.use(['laypage', 'layer', 'table', 'element'], function(){
var $ = layui.jquery
,laypage = layui.laypage //分页
,layer = layui.layer //弹层
,table = layui.table //表格
,element = layui.element //元素操作
,tableObj = table.render({});
//执行一个 table 实例
table.render({
elem: '#userManage'
,height: 420
,url: '${pageContext.request.contextPath}/manageUser/getAllUsers'//?postion='+paramValue //数据接口 拼接成allTeacher or allStudent
,limit:5
,where: {postion: postionValue} //通过才方法自定义接口参数 此处指getAllUsers（page,limit,postion）的参数（默认有page and limit）
//,page:true(自带的这个要注掉)
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
,limits:[5,10,15,20,25,30]
,first: false //不显示首页
,last: false //不显示尾页
}
,title: '用户表'
,toolbar: '#topTool'
//表头信息通过cols_arr集合设置
,cols :[cols_arr]
,id:'usersManage'
});
1.7、批量删除信息
//自定义工具栏
<script type="text/html" id="topTool">
<div class="layui-inline" lay-event="removeUsers" style="padding-left: 2px;padding-top:2px;">
<span class="layui-badge" style="width: 20px;height: 20px;padding-left: 2px;"><i class="layui-icon layui-icon-delete"></i></span>
</div>
<div class="layui-inline" lay-event="addUser" style="padding-left: 2px;padding-top:2px;">
<span class="layui-badge layui-bg-cyan" style="width: 20px;height: 20px;padding-left: 2px;"><i class="layui-icon layui-icon-add-1"></i></span>
</div>
</script>
//js代码
//监听头工具栏事件
table.on('toolbar(userManageFilter)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id);
var deList = new Array();
layEvent = obj.event;
data = checkStatus.data; //获取选中的数据
//遍历获取选中行的orderId 并保存到deList数组中
data.forEach(function(n, i) {
deList[i] = n.userId;
});
//批量删除
if (layEvent === 'removeUsers') {
if (deList.length != 0) {
layer.confirm('您要删除选中行吗？！', function(index) {
//向服务端发送删除指令
$.ajax({
type : "post",
url : "${pageContext.request.contextPath}/manageUser/delUsers",
dataType : 'json',
// 将要删除的信息id数组作为参数传递到函数中
data : "userIds=" + deList+" &postion="+postionValue,
success : function(data) {
var message = data.msg;
if (data.msg == '1') {
layer.close(index);
layer.alert("删除成功", {
icon : 1,
time : 2000,
});
table.reload('usersManage', {
page : {
curr : 1 //重新从第 1 页开始
},
where : {
postion : postionValue
}
});
} else {
layer.alert("删除失败", {
icon : 2,
title : '提示'
});
return;
}
},
error : function() {}
});
});
} else {
layer.alert("请选择要删除的列", {
icon : 2,
title : '提示'
});
}
}
});
扫一扫
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
