layuiCRUD
1、页面html
<table class="layui-hide" id="userTable" lay-filter="userTable"></table><div style="display: none;" id="userToolBar"><button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button><button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteBatch">批量删除</button></div><div id="userBar" style="display: none;"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="resetUserPwd">重置密码</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a><a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="selectUserRole">分配角色</a></div>
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" ><form class="layui-form" lay-filter="dataFrm" id="dataFrm"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">用户姓名:</label><div class="layui-input-inline"><input type="hidden" name="userid"><input type="text" name="realname" lay-verify="required" placeholder="请输入用户姓名" autocomplete="off"class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">登陆名称:</label><div class="layui-input-inline"><input type="text" name="loginname" lay-verify="required" placeholder="请输入用户登陆名称" autocomplete="off"class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">身份证号:</label><div class="layui-input-inline"><input type="text" name="identity" placeholder="请输入用户身份证号" autocomplete="off"class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">用户地址:</label><div class="layui-input-inline"><input type="text" name="address" placeholder="请输入用户地址" autocomplete="off"class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">用户电话:</label><div class="layui-input-inline"><input type="text" name="phone" lay-verify="required|phone" placeholder="请输入用户电话" autocomplete="off"class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">用户职位:</label><div class="layui-input-inline"><input type="text" name="position" placeholder="请输入用户职位" autocomplete="off"class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">用户性别:</label><div class="layui-input-inline"><input type="radio" name="sex" value="1" checked="checked" title="男"><input type="radio" name="sex" value="0" title="女"></div></div><div class="layui-inline"><label class="layui-form-label">是否可用:</label><div class="layui-input-inline"><input type="radio" name="available" value="1" checked="checked" title="可用"><input type="radio" name="available" value="0" title="不可用"></div></div></div><div class="layui-form-item" style="text-align: center;"><div class="layui-input-block"><button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button><button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button></div></div></form></div>
js表格数据渲染
tableIns=table.render({
elem: '#userTable' ,url:'${ctx}/user/loadAllUser.action' ,title: '用户数据表',toolbar:"#userToolBar" ,height:'full-200',cellMinWidth:100 ,page: true ,cols: [[ {
type: 'checkbox', fixed: 'left'},{
field:'userid', title:'ID',align:'center',width:'80'},{
field:'realname', title:'用户姓名',align:'center',width:'100'},{
field:'loginname', title:'登陆名',align:'center',width:'100'},{
field:'identity', title:'身份证号',align:'center',width:'150'},{
field:'phone', title:'用户电话',align:'center',width:'150'},{
field:'address', title:'用户地址',align:'center',width:'160'},{
field:'sex', title:'性别',align:'center',width:'80',templet:function(d){
return d.sex=='1'?'<font color=blue>男</font>':'<font color=red>女</font>';}},{
field:'pwd', title:'密码',align:'center',width:'80',templet:function(d){
return "******";}},{
field:'available', title:'是否可用',width:'100',align:'center',templet:function(d){
return d.available=='1'?'<font color=blue>可用</font>':'<font color=red>不可用</font>';}},{
fixed: 'right', title:'操作', toolbar: '#userBar', width:260,align:'center'}]]})
3、数据表格操作
table.on("toolbar(userTable)",function(obj){
switch(obj.event){
case 'add':openAddUser();break;case 'deleteBatch':deleteBatch();break;};})table.on('tool(userTable)', function(obj){
var data = obj.data; var layEvent = obj.event; if(layEvent === 'del'){
layer.confirm('真的删除【'+data.realname+'】这个用户吗', function(index){
$.post("${ctx}/user/deleteUser.action",{
userid:data.userid},function(res){
layer.msg(res.msg);tableIns.reload();})}); } else if(layEvent === 'edit'){
openUpdateUser(data);}else if(layEvent==='resetUserPwd'){
layer.confirm('真的重置【'+data.realname+'】这个用户的密码吗', function(index){
$.post("${ctx}/user/resetUserPwd.action",{
userid:data.userid},function(res){
layer.msg(res.msg);})}); }else if(layEvent==='selectUserRole'){
openselectUserRole(data);}});var url;var mainIndex;function openAddUser(){
mainIndex=layer.open({
type:1,title:'添加用户',content:$("#saveOrUpdateDiv"),area:['800px','400px'],success:function(index){
$("#dataFrm")[0].reset();url="${ctx}/user/addUser.action";}});}function openUpdateUser(data){
mainIndex=layer.open({
type:1,title:'修改用户',content:$("#saveOrUpdateDiv"),area:['800px','400px'],success:function(index){
form.val("dataFrm",data);url="${ctx}/user/updateUser.action";}});}form.on("submit(doSubmit)",function(obj){
var params=$("#dataFrm").serialize();$.post(url,params,function(obj){
layer.msg(obj.msg);layer.close(mainIndex)tableIns.reload();})});function deleteBatch(){
var checkStatus = table.checkStatus('userTable');var data = checkStatus.data;var params="";$.each(data,function(i,item){
if(i==0){
params+="ids="+item.userid;}else{
params+="&ids="+item.userid;}});layer.confirm('真的删除选中的这些用户吗', function(index){
$.post("${ctx}/user/deleteBatchUser.action",params,function(res){
layer.msg(res.msg);tableIns.reload();})}); }