layui-crud_综合

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; //获得 lay-event 对应的值（也可以是表头的 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();})}); }