叁有三分之一

layui表格及工作流二次开发实践1

layui表格及工作流二次开发实践1

viEcho Lv5

2021-04-23 19:55:09 2021-04-23 19:55:09 Created 2024-01-18 14:55:41 2024-01-18 14:55:41 Updated

java

activity

1.9k Words 10 Mins

学而时习之不亦说乎

layui官网

安装包下载

进入官网点击立即下载下载后的文件如下：

注：mock.js 是我自己加的，模拟后台接口数据用的

chooseRoleDialog.html列表弹窗页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="editor-app/libs/jquery_1.11.0/jquery.min.js"></script>
    <script src="layui/mock.js"></script>
</head>
<style>
.user-dialog{
    width: 900px;
    display: block;
    margin: auto;
}
.user-dialog .tree-area{
    width: 100%;
    display: block;
    float: left
}
.user-dialog .table-area{
    display: block;
    float: left
}
.defined-area{
    padding-left: 80%;
    padding-top: 3%;
}
.layui-form-label{
    width: 95px;
}
</style>
<body>
<div class="user-dialog">
<!--    <div class="tree-area">-->
<!--        <div id="tree_id" class="demo-tree-more"></div>-->
<!--    </div>-->
    <div class="table-area">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">角色分类编码</label>
                <div class="layui-input-inline">
                    <input type="tel" id="roleSortCode" name="roleSortCode"  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" id="roleSortName" name="roleSortName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn" onclick="queryTable()">查询</button>
            <button type="button" class="layui-btn" onclick="resetQuery()">重置</button>
        </div>
        <table class="layui-hide" id="user_table" lay-filter="test"></table>
        <div id="page"></div>
<!--        <div class="layui-btn-container defined-area">-->
<!--            <button type="button" class="layui-btn" onclick="canSave()">确定</button>-->
<!--            <button type="button" class="layui-btn" onclick="closeDialog()">取消</button>-->
<!--        </div>-->
    </div>
</div>

<script>
    layui.config({
        version: '1591161919724' //为了更新 js 缓存,可忽略
    });
    var userStr = "";
    var selectUser = [];
    var selectUserId = [];
    var requestUrl = "http://xx.xx.xx.xx:8890/upms/roleSort/pageRoleSort";
    var getTableData;
    var requestParams = {pageNum:1,pageSize:10,roleSortCode:"",roleSortName:""}
    var response = {};
    var tree,layer,util,laypage,table;
    layui.use(['tree', 'util','laypage', 'layer', 'table','element', 'slider'], function() {
        tree = layui.tree
        layer = layui.layer
        util = layui.util
        laypage = layui.laypage //分页
        table = layui.table //表格

        //页面第一次请求 默认 1页 10条
        getTableData = function getTableDatas(params,response) {
            $.ajax({
                url: requestUrl+'?pageNum='+params.pageNum+'&pageSize='+params.pageSize
                    +'&roleCode='+params.roleSortCode+'&roleName='+params.roleSortName,
                type:'GET',
                async: false,
                dataType:'json',
                success:function(res){
                    response = res.data;
                    rendTable(response);
                    page(response);
                    // 表格监听
                    table.on('checkbox(test)', function(obj){
                        if(obj.checked && obj.type=='all'){// 全选
                            for(var i in response.records){
                                var rowData = response.records[i];
                                if(selectUserId.indexOf(parseInt(rowData.id)) == -1){
                                    selectUser.push(rowData);
                                }
                            }
                        }else if(!obj.checked && obj.type=='all'){// 全不选
                            for(var i = 0;i< selectUser.length;i++){
                                for(var j = 0;j< response.records.length;j++){
                                    var rowData = response.records[j];
                                    if(parseInt(selectUser[i].id) == parseInt(rowData.id)){
                                       selectUser.splice(i,1);
                                    }
                                }
                            }
                        }else if (obj.checked){//单个选
                             selectUser.push(obj.data);
                        }else if (!obj.checked){//单个取消选择
                            for(var i in selectUser){
                                if(selectUser[i].id == obj.data.id){
                                    selectUser.splice(i,1);
                                }
                            }
                        }
                        selectUserId = [];
                        for(var i in selectUser){
                            selectUserId.push(selectUser[i].id);
                        }
                    });
                },
                error:function(status){
                    response = {};
                }
            });
        }

        // 重构数据 增加选中属性
        function rebuildTableData(response){
            var role_ids= window.parent.document.getElementById("roles_id").value;
            if(role_ids){
                var select_list = role_ids.split(";");
                // 数据回显选中  这部分逻辑可以放到后台实现
                for(var r in select_list){
                    var id = select_list[r].substring(0,select_list[r].indexOf(","));
                    var roleSortName = select_list[r].substring(select_list[r].indexOf(",")+1,select_list[r].lastIndexOf(","));
                    var roleSortCode = select_list[r].substring(select_list[r].lastIndexOf(",")+1,select_list[r].length);
                    var map = {};
                    map.id = id;
                    map.roleSortName = roleSortName;
                    map.roleSortCode = roleSortCode;
                    if(id){
                        selectUser.push(map);
                        selectUserId.push(parseInt(id));
                    }
                }
                for(var i in response.records){
                    var rowData = response.records[i];
                    if(selectUserId.indexOf(rowData.id)!=-1){
                        rowData.LAY_CHECKED = true;
                    } else {
                        rowData.LAY_CHECKED = false;
                    }
                }
            }
            console.log(response.records);
        }

        // 表格渲染
        function rendTable(response) {
            rebuildTableData(response);
            table.render({
                elem: '#user_table',
                cols:  [[ //表头
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'id', title: 'id', hide:true}
                    ,{field: 'roleSortCode', title: '角色分类编码', width:'30%'}
                    ,{field: 'roleSortName', title: '角色分类名称', width: '30%', sort: true, totalRow: true}
                    ,{field: 'remark', title: '备注', width:'40%', sort: true}
                ]],
                data: response.records, // 数据
                limit: response.total, // 显示的条数
                //page: true, // 开启分页
                done: function(res, curr, count){

                }
            });
        }
        // 分页
        function page(response) {
            laypage.render({
                elem: 'page',
                count: response.total,
		curr: response.current,
                limit: requestParams.pageSize,
                limits: [10, 20, 30, 40, 50],
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function (obj, first) {
                    //首次不执行
                    if (!first) {
                        requestParams.pageNum = obj.curr;
                        requestParams.pageSize = obj.limit;
                        getTableData(requestParams,response)
                    }
                },
                yes:function(index, layero){
                    layer.close(index);//需手动关闭 弹出层
                }
            });
        }
        //getTableData(requestParams, response);
	queryTable();
    });

    // 查询
    function queryTable(){
        requestParams.roleSortName = $("#roleSortName").val()==""?'':$("#roleSortName").val().trim();
        requestParams.roleSortCode = $("#roleSortCode").val()==""?'':$("#roleSortCode").val().trim();
        getTableData(requestParams, response);
    }

    // 重置
    function resetQuery(){
        $("#roleSortCode").val("");
        $("#roleSortName").val("");
        requestParams = {pageNum:1,pageSize:10,roleSortCode:"",roleSortName:""};
        getTableData(requestParams, response);
    }

    // 确定
    function canSave(){
        userStr = '';
        for(var i in selectUser){
            if(i == selectUser.length-1){
                userStr += selectUser[i].id+","+selectUser[i].roleSortName+","+selectUser[i].roleSortCode;
            }else{
                userStr += selectUser[i].id+","+selectUser[i].roleSortName+","+selectUser[i].roleSortCode+";";
            }
        }
        console.log(userStr);
        return userStr;
    }

    //function closeDialog(){
    //    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    //    parent.layer.close(index);
    //}
    // --树形结构
    // tree.render({
    //     elem: '#tree_id'
    //     ,data: data1
    //     ,showLine: true,
    //     click: function(obj){
    //         layer.msg(JSON.stringify(obj.data));
    //         var currTreeId = obj.data.id;
    //         //上一次点击的树节点id
    //         var beforeTreeId =  $('#tree_id').val();
    //         if (currTreeId !== beforeTreeId){
    //             $('div [data-id="'+beforeTreeId+'"] div .layui-tree-txt').first().css('color','');
    //             $('div [data-id="'+currTreeId+'"] div .layui-tree-txt').first().css('color','#009688');
    //             $('#tree_id').val(obj.data.id);
    //         }
    //     }
    // });
</script>
</body>
</html>

说明

至此layui关于表格的查询展示及勾选数据的回显都已全部处理完毕；目前做这个功能是activity工作流的二次开发，本页面实现的功能是工作流节点增加一个角色，点击弹出此页面选择角色。然后下次点击上次选中的数据需要被回显即被勾选上了！坑点：layui的表格复选框不支持jquery模拟点击事件，且如果用样式控制选中下次点击时复选框会异常！关于选中与否，使用表格字段属性LAY_CHECKED控制！

关于工作流绘制的二次开发”com-activity-demo”详见本人gitee地址 .下载项目后需要在对应的库生成对应的25张表。

注意：此项目工作流前端用的是angular.js，需要遵循其模板语法；此处layui这个表格弹窗，我采用的是iframe标签引入到对应的模板页面中的，所以涉及到iframe 标签及其父子页面传值调用的方法，参考博客iframe父子页面通信
此外，接口若有跨域需要在服务端添加允许跨域配置，且改写了前端代码后浏览器会有本地缓存，crtl+f5刷新后浏览或直接采用无痕浏览模式查看！

小结:后面继续写写activity之类的实践篇，及补上springboot的学习总结篇！

Title: layui表格及工作流二次开发实践1
Author: viEcho
Created at : 2021-04-23 19:55:09
Updated at : 2024-01-18 14:55:41
Link: https://viecho.github.io/2021/0423/activity-practice-1.html
License: This work is licensed under CC BY-NC-SA 4.0.

#activity

推荐阅读

工作流二次开发之新增表单实践2

工作流二次开发之新增表单实践2

初窥SpringSecurity安全框架

初窥SpringSecurity安全框架

Interceptor的使用及探究

Interceptor的使用及探究

推荐阅读

工作流二次开发之新增表单实践2

工作流二次开发之新增表单实践2

初窥SpringSecurity安全框架

初窥SpringSecurity安全框架

Comments

On this page

layui表格及工作流二次开发实践1

layui官网
安装包下载
chooseRoleDialog.html列表弹窗页面
说明