學而時習之不亦說乎
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的學習總結篇！