layui前端選單構建-批量刪除-彈框填寫-樹狀選單-樹狀下拉框選擇treeSelect
樹形表格treeTable實現了layui資料表格
TreeTable樹狀表
https://gitee.com/whvse/treetable-lay
https://gitee.com/whvse/treetable-lay/wikis/pages?sort_id=1986092&doc_id=142114
https://layuiextend.hsianglee.cn/eletree/
TreeSelect樹狀下拉
https://fly.layui.com/extend/treeSelect/
效果圖
頁面總體
<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script th:src="@{/js/jquery-1.10.2.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<style>
.demo-side {
position: relative;
transition: all .3s;
}
.demo-side.show {
padding-left: 120px;
position: relative;
}
.demo-side:before {
content: "假設這是側邊欄, treeTable使用了與layui資料表格完全不同的列寬分配方式, 由瀏覽器來分配, 所以當容器寬度變化後會自動適應, 對單頁面系統非常友好";
position: absolute;
left: 0;
top: 50%;
margin-top: -90px;
width: 105px;
visibility: hidden;
line-height: 1.5;
}
.demo-side.show:before {
visibility: visible;
}
</style>
</head>
<body>
<div id="edit-main" style="display: none;" >
<div class="my-form" id="edit-permission">
<form class="layui-form" action="">
<input type="hidden"id="menuId1" name="menuId1" required >
<div class="layui-form-item">
<label class="layui-form-label">選單型別</label>
<div class="layui-input-block">
<input type="radio" id="menuTypeM1" name="menuType1" value="M" title="目錄">
<input type="radio" id="menuTypeC1" name="menuType1" value="C" title="選單">
<input type="radio" id="menuTypeF1" name="menuType1" value="F" title="按鈕">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">選單名</label>
<div class="layui-input-inline">
<input type="text" id="menuName1" name="menuName1" required lay-verify="required" placeholder="選單名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">請求地址url</label>
<div class="layui-input-inline">
<input type="text" id="url1" name="url1" required lay-verify="required" placeholder="請求地址url" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">許可權標識</label>
<div class="layui-input-inline">
<input type="text" id="perms1" name="perms1" required lay-verify="required" placeholder="許可權標識" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">顯示排序</label>
<div class="layui-input-inline">
<input type="text" id ="orderNum1" name="orderNum1" required lay-verify="required" placeholder="顯示排序" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">圖示</label>
<div class="layui-input-inline">
<input type="text" id="icon1" name="icon1" required lay-verify="required" placeholder="圖示" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否顯示</label>
<div class="layui-input-block">
<input type="radio" id="visible1" name="visible1" value="0" title="顯示">
<input type="radio" id="visible2" name="visible1" value="1" title="隱藏">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">備註</label>
<div class="layui-input-inline">
<input type="text" id="remark1" name="remark1" required placeholder="備註" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemoEdit">立即提交</button>
</div>
</div>
</form>
</div>
</div>
<div id="add-main" style="display: none;" >
<div class="my-form" id="permission">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">上級選單ID</label>
<div class="layui-input-inline">
<input type="text"id="parentId" name="parentId" required readonly="readonly" placeholder="選單名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">上級選單</label>
<div class="layui-input-inline">
<input type="text" id="parentName" name="parentName" required readonly="readonly" placeholder="選單名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">選擇上級選單</label>
<div class="layui-input-inline">
<input type="text"id="tree" lay-filter="tree" required placeholder="選單名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">選單型別</label>
<div class="layui-input-block">
<input type="radio" id="menuTypeM" name="menuType" value="M" title="目錄">
<input type="radio" id="menuTypeC" name="menuType" value="C" title="選單">
<input type="radio" id="menuTypeF" name="menuType" value="F" title="按鈕">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">選單名</label>
<div class="layui-input-inline">
<input type="text" id="menuName" name="menuName" required lay-verify="required" placeholder="選單名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">請求地址url</label>
<div class="layui-input-inline">
<input type="text" id="url" name="url" required lay-verify="required" placeholder="請求地址url" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">許可權標識</label>
<div class="layui-input-inline">
<input type="text" id="perms" name="perms" required lay-verify="required" placeholder="許可權標識" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">顯示排序</label>
<div class="layui-input-inline">
<input type="text" id ="orderNum" name="orderNum" required lay-verify="required" placeholder="顯示排序" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">圖示</label>
<div class="layui-input-inline">
<input type="text" id="icon" name="icon" required value="#" lay-verify="required" placeholder="預設無為#" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否顯示</label>
<div class="layui-input-block">
<input type="radio" name="visible" value="0" title="顯示" checked>
<input type="radio" name="visible" value="1" title="隱藏">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">備註</label>
<div class="layui-input-inline">
<input type="text" id="remark" name="remark" required lay-verify="required" placeholder="備註" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
</div>
</div>
</form>
</div>
</div>
<div class="page-wrapper">
<div class="layui-btn-container" style="display: inline-block;">
<button id="btnReload" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></i>過載
</button>
<button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></i>重新整理
</button>
<!-- <button id="btnGetChecked" class="layui-btn layui-btn-sm layui-btn-primary">獲取選中</button>
<button id="btnToggleSide" class="layui-btn layui-btn-sm layui-btn-primary">演示側邊欄</button>-->
</div>
<div class="layui-btn-container" style="display: inline-block;">
<button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></i>展開全部
</button>
<button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></i>摺疊全部
</button>
<!-- <button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></i>展開使用者管理
</button>
<button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></i>摺疊使用者管理
</button>-->
<!-- <button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></i>勾選新增使用者
</button>-->
</div>
<input class="layui-input" id="edtSearch" value="" placeholder="輸入關鍵字"
style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
<div class="layui-btn-container" style="display: inline-block;">
<button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon"></i>搜尋
</button>
<button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">ဆ</i>清除搜尋
</button>
</div>
<div class="demo-side">
<table id="demoTreeTb"></table>
</div>
</div>
<script type="text/html" id="barDemo">
<button type="button" class="layui-btn layui-btn-radius" lay-event="add">新增</button>
<button type="button" class="layui-btn layui-btn-radius" lay-event="del">批量刪除</button>
<button type="button" class="layui-btn layui-btn-radius" lay-event="show">展開</button>
<!-- <a class="layui-btn layui-btn-xs" lay-event="add">新增</a>
<a class="layui-btn layui-btn-xs" lay-event="del">批量刪除</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">展開</a>-->
</script>
<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<script>
layui.config({
base: '/layui/lay/modules/' //自定義layui元件的目錄
}).extend({ //設定元件別名
treeTable: 'treeTable',
treeSelect: "treeSelect"
});
layui.use(['layer','tree', 'treeSelect','util', 'treeTable','form'], function () {
var treeSelect = layui.treeSelect;
var tree = layui.tree
var form = layui.form;
form.render();//渲染form
var $ = layui.jquery;
var layer = layui.layer;
var util = layui.util;
var treeTable = layui.treeTable;
form.render('select');
$('body').removeClass('layui-hide');
//開啟節點操作圖示
treeSelect.render({
// 選擇器
elem: '#tree',
// 資料
data: '/menu/treeSelect',
// 非同步載入方式：get/post，預設get
type: 'get',
// 佔位符
placeholder: '下拉框選擇父選單',
// 是否開啟搜尋功能：true/false，預設false
search: true,
// 一些可定製的樣式
style: {
folder: {
enable: true
},
line: {
enable: true
}
},
// 點選回撥
click: function(d){
//console.log(d);
console.log(d.current.name);
$('#parentId').val(d.current.id);
$('#parentName').val(d.current.name);
},
// 載入完成後的回撥函式
success: function (d) {
treeSelect.refresh('tree');
}
});
/* $.ajax({
url: "/menu/tree",
type: "GET",
success: function (data) {
console.log(data);
tree.render({
elem: '#test9'
,data: data
,click: function(obj){
layer.msg(JSON.stringify(obj.data));
}
});
}
});
*/
form.on('submit(formDemo)', function(data){
//layer.msg(JSON.stringify(data.field));
$.ajax({
url: "/menu/add",
type: "POST",
data: {
'parentId': data.field.parentId,
'menuName':data.field.menuName,
'menuType':data.field.menuType,
'url':data.field.url,
'visible':data.field.visible,
'orderNum':data.field.orderNum,
'icon':data.field.icon,
'perms':data.field.perms,
'remark':data.field.remark,
},
success: function (msg) {
console.log(msg);
if(msg.code==200){
layer.msg("成功新增");
}else{
layer.msg(msg.msg);
}
insTb.refresh();
//location.reload();
}
});
return false;
});
form.on('submit(formDemoEdit)', function(data){
//layer.msg(JSON.stringify(data.field));
$.ajax({
url: "/menu/edit",
type: "PUT",
data: {
'menuId': data.field.menuId1,
'menuName':data.field.menuName1,
'menuType':data.field.menuType1,
'url':data.field.url1,
'visible':data.field.visible1,
'orderNum':data.field.orderNum1,
'icon':data.field.icon1,
'perms':data.field.perms1,
'remark':data.field.remark1,
},
success: function (msg) {
console.log(msg);
if(msg.code==200){
layer.msg("成功修改");
}else{
layer.msg(msg.msg);
}
insTb.refresh();
//location.reload();
}
});
return false;
});
// 渲染表格
var insTb = treeTable.render({
elem: '#demoTreeTb',
url: 'menu/select',
toolbar: '#barDemo',
height: 'full-100',
tree: {
iconIndex: 2,
isPidData: true,
idName: 'menuId',
pidName: 'parentId',
},
defaultToolbar: ['filter', 'print', 'exports', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [
/* [
{title: '只是想演示一個三級表頭', colspan: 9},
],
[
{title: '只是想演示一個多級表頭', colspan: 4},
{field: 'menuUrl', title: '選單地址', rowspan: 2},
{title: '這是一個二級表頭', colspan: 4}
],*/
[
{type: 'numbers'},
{type: 'checkbox'},
{field: 'menuName', title: '選單名稱', minWidth: 165},
{
title: '選單圖示', align: 'center', hide: false,
templet: '<p><i class="layui-icon {{d.icon}}"></i></p>'
},
{field: 'url', title: '許可權url'},
{field: 'perms', title: '許可權標識'},
{title: '型別', templet: '<p><button type="button" class="layui-btn layui-btn-sm layui-btn-normal">{{d.menuType=="C"?"選單":(d.menuType=="M"?"目錄":"按鈕")}}</button></p>', align: 'center', width: 60},
{title: '可見', templet: '<p> <button type="button" class="layui-btn layui-btn-sm">{{d.visible=="0"?"顯示":"隱藏"}}</button></p>', align: 'center', width: 60},
{//{{d.menuType=="C"?"選單":"按鈕"}}
title: '建立時間', templet: function (d) {
return util.toDateString(d.createTime);
}
},
{
title: '更新時間', templet: function (d) {
return util.toDateString(d.updateTime);
}
},
{field: 'createBy', title: '建立者'},
{field: 'remark', title: '備註'},
{align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
]
],
style: 'margin-top:0;',
done:function(result){
insTb.expandAll();
}
});
// 工具列點選事件
treeTable.on('tool(demoTreeTb)', function (obj) {
var data = obj.data; //獲得當前行資料
var event = obj.event;
if (event === 'del') {
layer.confirm('真的刪除行麼', function(index){
$.ajax({
url: "/menu/id",
type: "DELETE",
data: {'id': data.menuId},
success: function (msg) {
if (msg.code == 200) {
//刪除這一行
obj.del();
//關閉彈框
layer.close(index);
layer.msg("刪除成功", {icon: 6});
} else {
layer.msg("刪除失敗"+msg.msg, {icon: 5});
}
}
});
layer.close(index);
//向服務端傳送刪除指令
});
} else if (event === 'edit') {
layer.msg('修改成功');
layer.open({
title: '新增選單',
/*如果是外部的html，type2，內部，type1*/
type: 1,
btnAlign: 'c',
area: ['500px', '600px'],
content: $("#edit-main")
,success: function(layero, index){
var div = layero.find('#edit-permission');
div.find("#menuId1").val(data.menuId);
div.find("#menuName1").val(data.menuName);
div.find("#url1").val(data.url);
div.find("#perms1").val(data.perms);
div.find("#icon1").val(data.icon);
div.find("#orderNum1").val(data.orderNum);
div.find("#remark1").val(data.remark);
if (data.visible=="0"){
div.find("#visible1").attr("checked","checked");
} else {
div.find("#visible2").attr("checked","checked");
}
console.log(data.menuType)
if(data.menuType=="M"){
div.find("#menuTypeM1").attr("checked","checked");
}else if(data.menuType=="F"){
div.find("#menuTypeF1").attr("checked","checked");
}else if(data.menuType=="C"){
div.find("#menuTypeC1").attr("checked","checked");
}
form.render();//渲染form
}
}
);
obj.update({authorityName: '新的名稱'});
}
});
// 頭部工具欄點選事件
treeTable.on('toolbar(demoTreeTb)', function (obj) {
switch (obj.event) {
case 'add':
layer.msg('新增');
layer.open({
title: '新增選單',
/*如果是外部的html，type2，內部，type1*/
type: 1,
btnAlign: 'c',
area: ['500px', '600px'],
content: $("#add-main")
,success: function(layero, index){
form.render();//渲染form
var map=insTb.checkStatus(false).map(function (d) {
return {
authorityName: d.menuName,
authorityId: d.menuId,
LAY_INDETERMINATE: d.LAY_INDETERMINATE
};
});
if(map.length==0){
layer.msg("無選中父項,預設構建一級目錄");
var div = layero.find('#permission');
div.find("#parentId").val(0);
div.find("#parentName").val("無選中，預設為一級");
div.find("#menuTypeM").attr("checked","checked");
form.render();
}else {
var div = layero.find('#permission');
div.find("#parentId").val(map[0].authorityId);
div.find("#parentName").val(map[0].authorityName);
div.find("#menuTypeF").attr("checked","checked");
}
//form.render();
}
}
);
break;
case 'show':
layer.msg('展開');
insTb.expandAll();
break;
case 'del':
layer.msg('批量刪除');
var map=insTb.checkStatus(false).map(function (d) {
return {
'menuId': d.menuId,
/* 'menuName': d.menuName,
'isSelected': d.LAY_INDETERMINATE*/
};
});
var ids="";
map.map(function(el, index) {
if(index==0){
ids=el.menuId;
}else{
ids=ids+","+el.menuId;
}
});
console.log(ids);
layer.confirm('真的刪除行麼', function(index){
$.ajax({
url: "/menu/ids",
type: "DELETE",
data:{'ids':ids},
//data: {'ids': arr},
success: function (msg) {
console.log(map);
if (msg.code == 200) {
//刪除這一行
//obj.del();
insTb.refresh();
//關閉彈框
layer.close(index);
layer.msg("刪除成功", {icon: 6});
} else {
layer.msg("刪除失敗"+msg.msg, {icon: 5});
}
}
});
layer.close(index);
//向服務端傳送刪除指令
});
break;
case 'LAYTABLE_TIPS':
layer.msg('提示');
break;
}
});
// 全部展開
$('#btnExpandAll').click(function () {
insTb.expandAll();
});
// 全部摺疊
$('#btnFoldAll').click(function () {
insTb.foldAll();
});
// 展開指定
$('#btnExpand').click(function () {
insTb.expand(2);
});
// 摺疊指定
$('#btnFold').click(function () {
insTb.fold(2);
});
// 設定選中
$('#btnChecked').click(function () {
insTb.expand(4);
insTb.setChecked([4]);
});
// 搜尋
$('#btnSearch').click(function () {
var keywords = $('#edtSearch').val();
if (keywords) {
insTb.filterData(keywords);
} else {
insTb.clearFilter();
}
});
// 清除搜尋
$('#btnClearSearch').click(function () {
insTb.clearFilter();
});
// 過載
$('#btnReload').click(function () {
insTb.reload();
});
$('#btnRefresh').click(function () {
insTb.refresh();
});
// 獲取選中
$('#btnGetChecked').click(function () {
layer.alert('<pre>' + JSON.stringify(insTb.checkStatus(false).map(function (d) {
return {
authorityName: d.menuName,
authorityId: d.menuId,
LAY_INDETERMINATE: d.LAY_INDETERMINATE
};
}), null, 3) + '</pre>');
});
/* // 演示側邊欄
$('#btnToggleSide').click(function () {
$('.demo-side').toggleClass('show');
});*/
});
</script>
</body>
</html>重點資料的非同步提交
form.on('submit(formDemo)', function(data){
//layer.msg(JSON.stringify(data.field));
$.ajax({
url: "/menu",
type: "POST",
//data:data.field,
data: {
'parentId': data.field.parentId,
'menuName':data.field.menuName,
'menuType':data.field.menuType,
'url':data.field.url,
'visible':data.field.visible,
'orderNum':data.field.orderNum,
'icon':data.field.icon,
'perms':data.field.perms,
'remark':data.field.remark,
},
success: function (msg) {
console.log(msg);
if(msg.code==200){
layer.msg("成功新增");
}else{
layer.msg(msg.msg);
}
insTb.refresh();
//location.reload();
}
});
return false;
});彈窗填寫
layer.open({
title: '新增選單',
/*如果是外部的html，type2，內部，type1*/
type: 1,
btnAlign: 'c',
area: ['500px', '600px'],
content: $("#add-main").html()
,success: function(layero, index){
form.render();//渲染form
var map=insTb.checkStatus(false).map(function (d) {
return {
//可修改欄位名
authorityName: d.menuName,
authorityId: d.menuId,
LAY_INDETERMINATE: d.LAY_INDETERMINATE
};
});
if(map.length==0){
layer.msg("無選中父項,預設構建一級目錄");
var div = layero.find('#permission');
div.find("#parentId").val(0);
div.find("#parentName").val("無選中，預設為一級");
div.find("#menuTypeM").attr("checked","checked");
form.render();
}else {
var div = layero.find('#permission');
div.find("#parentId").val(map[0].authorityId);
div.find("#parentName").val(map[0].authorityName);
div.find("#menuTypeF").attr("checked","checked");
}
}
}
);批量刪除
case 'del':
layer.msg('批量刪除');
var map=insTb.checkStatus(false).map(function (d) {
return {
'menuId': d.menuId,
/* 'menuName': d.menuName,
'isSelected': d.LAY_INDETERMINATE*/
};
});
var ids="";
map.map(function(el, index) {
if(index==0){
ids=el.menuId;
}else{
ids=ids+","+el.menuId;
}
});
console.log(ids);
layer.confirm('真的刪除行麼', function(index){
$.ajax({
url: "/menu/ids",
type: "DELETE",
data:{'ids':ids},
//data: {'ids': arr},
success: function (msg) {
console.log(map);
if (msg.code == 200) {
//刪除這一行
obj.del();
//關閉彈框
layer.close(index);
layer.msg("刪除成功", {icon: 6});
} else {
layer.msg("刪除失敗", {icon: 5});
}
}
});
layer.close(index);
//向服務端傳送刪除指令
});獲取監聽事件中，行資訊
var data = obj.data; //獲得當前行資料
var event = obj.event;//獲得當前事件設定單選框選中情況
//第一種
<div class="input-group">
<input id="type1" type="radio" name="type" value="true">選單
<input id="type2" type="radio" name="type" value="false">按鈕
</div>
$("#type1").removeAttr("checked");
$("#type2").attr("checked","checked");
//第二種
<input type="radio" name="sex" id="sex" value="1" title="？">
$("input[name=sex][value=1]").attr("checked", data.UserSex == 1 ? true : false); if(data.menuType=="M"){
div.find("#menuTypeM1").attr("checked","checked");
}else if(data.menuType=="F"){
div.find("#menuTypeF1").attr("checked","checked");
}else if(data.menuType=="C"){
div.find("#menuTypeC1").attr("checked","checked");
}
//必須呼叫form重新整理，否則選中情況失效
form.render();獲取單選框選中情況
獲取單選框的值有5種方式：
1、$('input:radio:checked').val()；
2、$("input[type='radio']:checked").val();
3、$("input[name='rd']:checked").val();
4,$(":radio[checked]").each(function(radio){
alert($(this).val());
5,jq1.4以上版本用 $("input[name='user']:checked").val(); 也可以獲取到的指定id查詢html元素
var div = layero.find('#edit-permission');
div.find("#menuId1").val(data.menuId);//map迴圈構建陣列 後端Set<> ids
var ids="";
map.map(function(el, index) {
if(index==0){
ids=el.menuId;
}else{
ids=ids+","+el.menuId;
}
});
console.log(ids);轉化為json字串
JSON.stringify(data)陣列操作
JS陣列與集合
https://www.jianshu.com/p/c55eb7e4f491
加入搜尋條件表單過載
//監聽提交 lay-filter="search"
form.on('submit(search)', function(data){
layer.msg(JSON.stringify(data.field));//表格資料序列化
var formData = data.field;
console.debug(formData);
var name = formData.name,
url=formData.url,
icon=formData.icon,
parent_id=formData.parent_id;
//資料表格過載
table.reload('tableReload', {
page: {
curr: 1 //重新從第 1 頁開始
}
, where: {//這裡傳參 向後臺
name: name,
url:url
}
, url: '/menu/page'//後臺做模糊搜尋介面路徑
, method: 'post'
});
return false;//false：阻止表單跳轉 true：表單跳轉
});
});
忘了提示layer.open時，不要開啟指定id的div字尾加.html(),會導致下拉框失效
相關文章
- Vue3學習（十八） - TreeSelect 樹選擇Vue
- Vue動態構建混合資料Treeselect選擇樹及巨樹問題的解決方法Vue
- JS遍歷樹狀資料，選擇需要的欄位重構一個新的樹狀資料JS
- Java選擇框和單選按鈕Java
- 使用遞迴實現樹狀選單（無限級分類）遞迴
- 使用 ATX 判斷單選框選中狀態、開關狀態、圖示型別型別
- ztree樹形選單demo
- 讓前端的下拉框支援單選、多選及全選，後臺MyBaits解決方案前端AI
- vue使用iview實現單選，禁選，下拉框的效果VueView
- vue.js單選全選刪除Vue.js
- 使用Vue實現下拉選單框批量新增選項Vue
- WPF實現樹形下拉選單框(TreeComboBox)
- iOS 多選刪除(附tableViewTips及單選刪除)iOSView
- oracle樹形選單查詢Oracle
- 點選刪除按鈕彈出是否刪除提示框
- 透過單選按鈕控制編輯框的狀態
- 短視訊app開發，左滑刪除或長按彈出刪除選擇框APP
- java從資料庫讀取選單，遞迴生成選單樹Java資料庫遞迴
- 誰有樹型選單的例子
- selenium+python 下拉框選擇Python
- Android列表實現單選、多選、全選、取消、刪除Android
- 將選中的下拉選單值寫入文字框
- Flutter | 超實用簡單選單彈出框 PopupMenuButtonFlutter
- 短視訊直播系統，選擇選項時，點選出現下拉框
- jQuery操作單選框、多選框是否選中問題jQuery
- 【Swift】彈出日曆選擇框Swift
- Vue遞迴元件實現樹形結構選單Vue遞迴元件
- 如何快速、且易懂編寫Java遞迴生成樹形選單結構Java遞迴
- Vue.js學習（八）—— 樹形結構下拉框元件vue-treeselectVue.js元件
- 原生js多選框選中排序及刪除JS排序
- Flutter 自定義輸入框Selection選單和選擇器Flutter
- 【筆記】樹形選擇排序筆記排序
- 短視訊系統原始碼，點選選擇框，底部彈出可以選擇的選項原始碼
- 求教：python+selenium 下拉框選擇Python
- jQuery多級樹形選單詳解jQuery
- 商品訂單（增刪改查）：新增訂單；批量刪除，發貨；模糊查詢，下拉選單內容過濾（含時間）；全選反選，列名排序排序
- Bootstrap系列 -- 28. 下拉選單狀態boot
- JavaScript操作文字框、單選按鈕、下拉框、核取方塊JavaScript