代码拉取完成，页面将自动刷新
Fork 仓库
加载中
确定同步？
同步操作将从 dhj123/layui-form-render 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
editor_external.html
56.37 KB
adminj
提交于
2021-11-26 11:53
.
修正formdata bug 增加 禁用/启用FIELD，增加扩展左则按钮右则属性列子
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173
<!--author:adminj-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="adminj/libs/layui/css/layui.css?v=1">
<link rel="stylesheet" href="adminj/libs/select2/css/select2.min.css">
<script src="adminj/libs/layui/layui.js?2.6.8&66"></script>
<script src="adminj/libs/jquery/jquery-3.6.0.min.js"></script>
<script src="adminj/libs/sortable/sortable.min.js"></script>
<script src="adminj/libs/sortable/jquery-sortable.js"></script>
<script src="adminj/libs/select2/js/select2.full.min.js"></script>
<script src="adminj/libs/ckeditor5/ckeditor.js"></script>
<script src="adminj/modules/adminj_utils.js"></script>
</head>
<body>
<!--code-->
<div class="layui-form">
<div class="adminj-ds-top-left">AdminJ LayuiFormRender</div>
<div class="adminj-ds-top-right">
<button type="button" class="layui-btn layui-btn-sm" lay-filter="exportJSON" id="exportJSON">
<i class="layui-icon layui-icon-download-circle" style="font-size: 1.2em"></i> 确 定
</button>
<button type="button" class="layui-btn layui-btn-sm" lay-filter="clean" id="clean">
清 空
</button>
</div>
</div>
<div id='adminJLayuiFormRender'></div>
<span id="componts_span" style="display:none;">
<div class="layui-form-item adminj-sort-item" id="popTableSelect" rename="false">
<label class="layui-form-label">选择数据</label>
<div class="layui-input-inline">
<input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux"></div>
</div>
<div class="layui-form-item adminj-sort-item" id="custom" rename="false">
<label class="layui-form-label">自定义表单</label>
<div class="layui-input-inline">
</div>
<div class="layui-form-mid layui-word-aux"></div>
</div>
</span>
</body>
</html>
<script>
var selectTableColumns = [];
var $;
layui.config({
//dir: '/res/layui/'
version: true,
debug: true,
base: 'adminj/modules/'
}).extend({
tableSelect: 'tableSelect/tableSelect'
}).use(['adminJLayuiFormRender', 'tableSelect'], function() {
$ = layui.$;
var tableSelect = layui.tableSelect;
var compontsHtml = $('#componts_span').html();
$('#componts_span').remove()
var renderPopTableSelectObjects = {},
renderSelectSObject = {};
var formRender = layui.adminJLayuiFormRender;
formRender.render({
id: 'adminJLayuiFormRender',
componts: {
'基础组件': {
'text': '输入框',
'hidden': '隐藏域',
'password': '密码框',
'textarea': '文本域',
'date': '日期选择',
'switch': '选择开关',
'select': '下拉选项',
'select2': '下拉多选',
'radio': '单选框',
'checkbox': '多选框',
'dateRange': '日期范围',
'color': '颜色选择器',
'editor': '文本编辑器',
'slider': '滑块',
'rate': '评分',
'selectS': '无限级联动',
'popTableSelect': '弹窗表格选择',
},
'文件上传': {
'uploadImage': '单图上传',
'uploadImages': '多图上传',
'uploadFile': '文件上传',
'uploadFiles': '多文件上传'
},
'布局': {
'groupLayout': '多组布局'
}
},
compontsHtml: compontsHtml, //左则按理拖放完成后要替换的组件HTML
customRender: function(params) { //自定义组件
var formRender = params.formRender;
var dragOverComponents = params.dragOverComponents;
var toolProperites = params.toolProperites;
/**
* 定义 弹窗表格选择
**/
dragOverComponents.popTableSelect = {
init: function(formRender, item) { //初始化组件
var id = 'st_' + new Date().getTime();
item.find('input').attr('id', id);
tableSelect.render({
elem: '#' + id,
searchKey: 'my',
checkedKey: 'id',
searchPlaceholder: '自定义文字和name',
table: {
url: 'adminj/modules/tableSelect/table.json',
cols: [
[{
type: 'checkbox'
}, {
field: 'id',
title: 'ID',
width: 100
}, {
field: 'username',
title: '姓名',
width: 300
}, {
field: 'sex',
title: '性别',
width: 100
}]
]
},
done: function(elem, data) {
}
});
}
};
/**
* 定义 弹窗表格选择 选择中后右边的属性栏
* @param item
*/
toolProperites.popTableSelect = function(item) { //点击组件后生成右边属性栏
return [{
isArray: 0,
properties: toolProperites.base.base1,
hideTypes: ['placeholder', 'validateRule', 'minLength', 'maxLength']
}, {
label: '选择表',
type: 'select',
id: 'tableName',
range: "1",
options: [],
initFunc: function(params) {
popTableSelectObject.initSelectTable(params)
},
changeFunc: function(params) {
popTableSelectObject.selectTable(params)
}
}, {
label: '存储字段',
type: 'select',
id: 'saveColumnName',
range: "1",
options: [],
changeFunc: function(params) {}
}, {
label: '结果可以多选',
type: 'checkbox',
id: 'resultSelectType',
laySkin: 'primary',
changeFunc: function(params) {}
}, {
type: 'showColumns',
id: 'showColumns',
defaultFunc: function(params) { //显示所有字段
renderPopTableSelectObjects.showColumnsObject = popTableSelectObject.renderShowColumnsOptionTable(params)
}
}, {
type: 'showIfColumns',
id: 'showSqlIf',
defaultFunc: function(params) { //显示条件字段
renderPopTableSelectObjects.ifSqlColumnsObject = popTableSelectObject.renderSqlIfOptionTable(params)
}
}, {
type: 'showOrderColumns',
id: 'showOrder',
defaultFunc: function(params) { //显示排序字段
renderPopTableSelectObjects.orderColumnsObject = popTableSelectObject.renderOrderOptionTable(params)
}
}, {
type: 'userQueryColumns',
id: 'userQuery',
defaultFunc: function(params) { //显示用户查询字段
renderPopTableSelectObjects.userQueryColumnObject = popTableSelectObject.renderUserQueryOptionTable(params)
}
}]
}
/**
* 重写 无限级联动 选择中后右边的属性栏
*
* */
// dragOverComponents.selectS = {
//
// }
/**
* 重写 无限级联动 选择中后右边的属性栏
* @param item
*/
toolProperites.selectS = function(item) {
return [{
isArray: 0,
properties: toolProperites.base.base1,
showTypes: ['name', 'label', 'defValue', 'required', 'labelWidth', 'rowWidth', 'disabled']
}, , {
label: '选择表',
type: 'select',
id: 'tableName',
range: "1",
options: [],
initFunc: function(params) {
selectSObject.initSelectTable(params)
},
changeFunc: function(params) {
selectSObject.selectTable(params)
}
}, {
label: '存储字段',
type: 'select',
id: 'saveColumnName',
range: "1",
options: [],
changeFunc: function(params) {}
}, {
label: '显示字段',
type: 'select',
id: 'showColumnName',
range: "1",
options: [],
changeFunc: function(params) {}
}, {
label: '关联子数据字段',
type: 'select',
id: 'parentColumnName',
range: "1",
options: [],
changeFunc: function(params) {}
}, {
label: '必须选择最后一级数据',
type: 'checkbox',
id: 'isLastSelect',
laySkin: 'primary'
}, {
type: 'showIfColumns',
id: 'showSqlIf',
defaultFunc: function(params) { //显示条件字段
renderSelectSObject.ifSqlColumnsObject = selectSObject.renderSqlIfOptionTable(params)
}
}, {
type: 'showOrderColumns',
id: 'showOrder',
defaultFunc: function(params) { //显示排序字段
renderSelectSObject.orderColumnsObject = selectSObject.renderOrderOptionTable(params)
}
}];
}
/**
* 定义 组件 custom 选择中后右边的属性栏
* @param item
*/
toolProperites.custom = function(item) { //点击组件后生成右边属性栏
return [{
label: "名称",
type: 'text',
id: 'name'
}]
}
}
});
//selectS 无限级联动 的左则属性栏操作
var selectSObject = {
/**
* 如果有选择的结果数据，则需要初始化UI及其默认显示有选举权据
* @param params
* @param tableName
*/
init: function(params, tableName) {
var that = this;
var divId = params.item.attr('id');
//加载字段成功后初始化所有input
this.loadTableColumns(tableName, function(tableName, resultArr) {
var properties = formRender.propertiesMap[divId];
var saveColumnName = properties.saveColumnName;
$('#saveColumnName').val(saveColumnName);
var showColumnName = properties.showColumnName;
$('#showColumnName').val(showColumnName);
var parentColumnName = properties.parentColumnName;
$('#parentColumnName').val(parentColumnName);
//显示的sql字段
var showColumns = properties.showColumns;
if (showColumns != undefined) {
var renderObj = renderPopTableSelectObjects.showColumnsObject;
for (var i = 0; i < showColumns.length; i++) {
var row = showColumns[i];
if (row.columnName == undefined) continue;
renderObj.renderNewTr();
var trs = renderObj.getTable().children();
var tds = trs.eq(i).children();
that.appendColumnNameOptions(tds.eq(0).find('select'), resultArr, row.columnName);
tds.eq(1).find('input').val(row.label);
}
}
//sql查询的条件字段
var ifSqlColumns = properties.ifSqlColumns;
if (ifSqlColumns != undefined) {
var renderObj = renderPopTableSelectObjects.ifSqlColumnsObject;
for (var i = 0; i < ifSqlColumns.length; i++) {
var row = ifSqlColumns[i];
if (row.columnName == undefined) continue;
renderObj.getParams().clickCreateNewTr(renderObj, renderObj.getParams());
var trs = renderObj.getTable().children();
var tds = trs.eq(i).children();
that.appendColumnNameOptions(tds.eq(0).find('select'), resultArr, row.columnName);
tds.eq(1).find('select').val(row.ifSelect);
tds.eq(2).find('input').val(row.value);
}
}
//排序字段
var orderColumns = properties.orderColumns;
if (orderColumns != undefined) {
var renderObj = renderPopTableSelectObjects.orderColumnsObject;
if (orderColumns.columnName != undefined) {
var trs = renderObj.getTable().children();
var tds = trs.eq(0).children();
tds.eq(0).find('select').val(orderColumns.columnName);
tds.eq(1).find('select').val(orderColumns.orderType);
}
}
});
},
/**
* 初始化能选择的数据表
* @param params
*/
initSelectTable: function(params) {
var that = this;
//列出所有的表
ajaxData('get', './tables.json', {
action: 'tables'
}, function(data) { //列出所有表
if (data.resultCode == 0) {
var arr = data.result;
var select = $('select[name="tableName"]');
select.children().remove();
select.append('<option value="">选择</option>')
for (var i = 0; i < arr.length; i++) {
select.append('<option value="{0}">{0}[{1}]</option>'.format(arr[i].tableName, arr[i].comment))
}
//如果有数据则选中
var divId = params.item.attr('id');
var tableName = formRender.propertiesMap[divId].tableName;
if (tableName != undefined && tableName != '') {
params.form.val(tableName);
that.init(params, tableName);
}
}
});
},
/**
* 加载数据表的字段
* @param tableName
* @param loadedFunc
*/
loadTableColumns: function(tableName, loadedFunc) {
var that = this;
var showSelectFunc = function(jqueryName, arr) {
var select = $(jqueryName);
that.appendColumnNameOptions(select, arr);
}
ajaxData('get', './tables-columns.json', {
action: 'columns',
tableName: tableName
}, function(data) { //列出所有表
if (data.resultCode == 0) {
var arr = data.result;
showSelectFunc('select[name="saveColumnName"]', arr);
showSelectFunc('select[name="showColumnName"]', arr);
showSelectFunc('select[name="parentColumnName"]', arr);
showSelectFunc('select[name="orderColumn"]', arr);
selectTableColumns = arr;
if (loadedFunc != undefined) {
loadedFunc(tableName, arr);
}
}
});
},
/**
* 在select中选中表时执行
* @param params
*/
selectTable: function(params) {
var divId = params.item.attr('id');
selectTableColumns = [];
$('#showColumnTable').children().remove(); //清空选择的显示字段
$('#showSqlIfTable').children().remove(); //清空选择的条件
$('select[name="saveColumnName"]').children().remove();
$('select[name="showColumnName"]').children().remove();
$('select[name="parentColumnName"]').children().remove();
var tr = $('#showOrderColumns').children().eq(0).children();
var trSelect = tr.eq(0).find('select');
trSelect.children().remove();
trSelect.append('<option value="">请选择表</option>');
tr.eq(1).find('select').val('');
var properties = formRender.propertiesMap[divId];
delete properties.showColumnName;
delete properties.saveColumnName;
delete properties.parentColumnName;
delete properties.ifSqlColumns;
properties.orderColumns = {};
if (params.value == '') return;
this.loadTableColumns(params.value);
},
//显示要SQL查询条件
renderSqlIfOptionTable: function(params) {
var that = this;
var divId = params.item.attr('id');
var rootNode = $('#propertiesDiv');
var inputArrays = ['<select tr-index="{0}" td-index="{1}" lay-ignore style="height: 38px;border-color: #eee;width:100px;"></select>',
'<select tr-index="{0}" td-index="{1}" lay-ignore style="height: 38px;border-color: #eee;width:50px;"></select>',
'<input tr-index="{0}" td-index="{1}" type="text" class="layui-input" >'
];
var inputEventArrays = [function(index, params, input) {
input.change(function() {
var ifSqlColumns = formRender.propertiesMap[divId].ifSqlColumns[index];
ifSqlColumns.columnName = input.val();
})
}, function(index, params, input) {
input.change(function() {
var ifSqlColumns = formRender.propertiesMap[divId].ifSqlColumns[index];
ifSqlColumns.ifSelect = input.val();
})
}, function(index, params, input) {
input.focusout(function() {
var ifSqlColumns = formRender.propertiesMap[divId].ifSqlColumns[index];
ifSqlColumns.value = input.val();
})
}];
var sqlIf = ['>=', '<=', '>', '<', '=', '!=', 'like']
var renderOptionsTableObject = new RenderOptionsTableObject();
renderOptionsTableObject.render(rootNode, {
item: params.item,
tableId: 'showSqlIfTable',
newTrButtonLabel: '增加查询条件',
tdInputArrays: inputArrays,
inputEventArrays: inputEventArrays,
removeTrFunc: function(index, params) { //删除回调
formRender.propertiesMap[divId].ifSqlColumns.splice(index, 1);
},
clickCreateNewTr: function(object, params) {
var tableSelect = $('select[name="tableName"]');
if (tableSelect.val() == '') {
layui.layer.msg('请选择数据表')
return false;
}
object.renderNewTr(); //直接调用函数
//在写入新行后执行新代码
var len = object.getTable().children().length;
var tds = object.getTable().children().eq(len - 1).children(); //最后一行
var columnSelect = tds.eq(0).find('select');
that.appendColumnNameOptions(columnSelect, selectTableColumns);
var ifSqlColumns = formRender.propertiesMap[divId].ifSqlColumns;
if (ifSqlColumns == undefined) ifSqlColumns = [], formRender.propertiesMap[divId].ifSqlColumns = ifSqlColumns;
ifSqlColumns[ifSqlColumns.length] = {};
var ifSelect = tds.eq(1).find('select');
ifSelect.append('<option value="">选择</option>')
for (var i = 0; i < sqlIf.length; i++) {
ifSelect.append('<option value="{0}">{0}</option>'.format(sqlIf[i]))
}
return false; //返回false后不再往下执行
}
});
return renderOptionsTableObject;
}, //显示排序字段
renderOrderOptionTable: function(params) {
var divId = params.item.attr('id');
var rootNode = $('#propertiesDiv');
var inputArrays = ['<select name="orderColumn" tr-index="{0}" td-index="{1}" lay-ignore style="height: 38px;border-color: #eee;width:120px;"><option value="">请选择表</option></select>',
'<select name="orderType" tr-index="{0}" td-index="{1}" lay-ignore style="height: 38px;border-color: #eee;width:120px;">' +
'<option value="">选择排序方式</option><option value="asc">顺序</option><option value="desc">倒序</option></select>'
];
var inputEventArrays = [function(index, params, input) {
input.change(function() {
var orderColumns = formRender.propertiesMap[divId].orderColumns;
console.log(JSON.stringify(orderColumns))
orderColumns.columnName = input.val();
})
}, function(index, params, input) {
input.change(function() {
var orderColumns = formRender.propertiesMap[divId].orderColumns;
orderColumns.orderType = input.val();
})
}];
var renderParams = {
item: params.item,
tableId: 'showOrderColumns',
newTrButtonLabel: '选择排序字段',
newTrButtonLabelClick: 1, //不执行按钮点击事件
showRemoveButton: 1, //不显示删除行按钮
tdInputArrays: inputArrays,
inputEventArrays: inputEventArrays,
removeTrFunc: function(index, params) { //删除回调
}
};
var renderOptionsTableObject = new RenderOptionsTableObject();
renderOptionsTableObject.render(rootNode, renderParams);
$('#showOrderColumns_button').children().remove(); //删除添加新行的图标
renderOptionsTableObject.renderNewTr(); //直接生成新行
var orderColumns = formRender.propertiesMap[divId].orderColumns;
if (orderColumns == undefined) orderColumns = {}, formRender.propertiesMap[divId].orderColumns = orderColumns;
console.log(JSON.stringify(formRender.propertiesMap[divId].orderColumns))
return renderOptionsTableObject;
},
appendColumnNameOptions: function(select, columnArr, selectedValue) {
select.children().remove();
select.append('<option value="">选择</option>')
for (var i = 0; i < columnArr.length; i++) {
var comment = columnArr[i].columnComment;
if (!(comment == undefined || comment == '')) {
comment = '[{0}]'.format(comment);
}
var selected = (selectedValue == columnArr[i].columnName) ? 'selected' : ''
select.append('<option value="{0}" {2}>{0}{1}</option>'.format(columnArr[i].columnName, comment, selected))
}
}
}
//popTableSelect 的左则属性栏操作
var popTableSelectObject = {
/**
* 如果有选择的结果数据，则需要初始化UI及其默认显示有选举权据
* @param params
* @param tableName
*/
init: function(params, tableName) {
var that = this;
var divId = params.item.attr('id');
//加载字段成功后初始化所有input
this.loadTableColumns(tableName, function(tableName, resultArr) {
//显示的sql字段
var showColumns = formRender.propertiesMap[divId].showColumns;
if (showColumns != undefined) {
var renderObj = renderPopTableSelectObjects.showColumnsObject;
for (var i = 0; i < showColumns.length; i++) {
var row = showColumns[i];
if (row.columnName == undefined) continue;
renderObj.renderNewTr();
var trs = renderObj.getTable().children();
var tds = trs.eq(i).children();
that.appendColumnNameOptions(tds.eq(0).find('select'), resultArr, row.columnName);
tds.eq(1).find('input').val(row.label);
}
}
//sql查询的条件字段
var ifSqlColumns = formRender.propertiesMap[divId].ifSqlColumns;
if (ifSqlColumns != undefined) {
var renderObj = renderPopTableSelectObjects.ifSqlColumnsObject;
for (var i = 0; i < ifSqlColumns.length; i++) {
var row = ifSqlColumns[i];
if (row.columnName == undefined) continue;
renderObj.getParams().clickCreateNewTr(renderObj, renderObj.getParams());
var trs = renderObj.getTable().children();
var tds = trs.eq(i).children();
that.appendColumnNameOptions(tds.eq(0).find('select'), resultArr, row.columnName);
tds.eq(1).find('select').val(row.ifSelect);
tds.eq(2).find('input').val(row.value);
}
}
//排序字段
var orderColumns = formRender.propertiesMap[divId].orderColumns;
if (orderColumns != undefined) {
var renderObj = renderPopTableSelectObjects.orderColumnsObject;
if (orderColumns.columnName != undefined) {
var trs = renderObj.getTable().children();
var tds = trs.eq(0).children();
tds.eq(0).find('select').val(orderColumns.columnName);
tds.eq(1).find('select').val(orderColumns.orderType);
}
}
//用户可以输入查询的字段
var userQueryColumn = formRender.propertiesMap[divId].userQueryColumn;
if (userQueryColumn != undefined) {
var renderObj = renderPopTableSelectObjects.userQueryColumnObject;
if (userQueryColumn.columnName != undefined) {
var trs = renderObj.getTable().children();
var tds = trs.eq(0).children();
tds.eq(0).find('select').val(userQueryColumn.columnName);
tds.eq(1).find('select').val(userQueryColumn.ifSelect);
}
}
});
},
/**
* 初始化能选择的数据表
* @param params
*/
initSelectTable: function(params) {
var that = this;
//列出所有的表
ajaxData('get', './tables.json', {
action: 'tables'
}, function(data) { //列出所有表
if (data.resultCode == 0) {
var arr = data.result;
var select = $('select[name="tableName"]');
select.children().remove();
select.append('<option value="">选择</option>')
for (var i = 0; i < arr.length; i++) {
select.append('<option value="{0}">{0}[{1}]</option>'.format(arr[i].tableName, arr[i].comment))
}
//如果有数据则选中
var divId = params.item.attr('id');
var tableName = formRender.propertiesMap[divId].tableName;
if (tableName != undefined && tableName != '') {
params.form.val(tableName);
that.init(params, tableName);
}
}
});
},
/**
* 加载数据表的字段
* @param tableName
* @param loadedFunc
*/
loadTableColumns: function(tableName, loadedFunc) {
var that = this;
ajaxData('get', './tables-columns.json', {
action: 'columns',
tableName: tableName
}, function(data) { //列出所有表
if (data.resultCode == 0) {
var arr = data.result;
var select = $('select[name="saveColumnName"]');
that.appendColumnNameOptions(select, arr);
select = $('select[name="orderColumn"]');
that.appendColumnNameOptions(select, arr); //init 排序字段
select = $('#showUserQueryTable').children().eq(0).children().eq(0).find('select');
that.appendColumnNameOptions(select, arr); //init 用户查询
selectTableColumns = arr;
if (loadedFunc != undefined) {
loadedFunc(tableName, arr);
}
}
});
},
/**
* 在select中选中表时执行
* @param params
*/
selectTable: function(params) {
var divId = params.item.attr('id');
selectTableColumns = [];
$('#showColumnTable').children().remove(); //清空选择的显示字段
$('#showSqlIfTable').children().remove(); //清空选择的条件
$('select[name="saveColumnName"]').children().remove();
var tr = $('#showOrderColumns').children().eq(0).children();
var trSelect = tr.eq(0).find('select');
trSelect.children().remove();
trSelect.append('<option value="">请选择表</option>');
tr.eq(1).find('select').val('');
tr = $('#showUserQueryTable').children().eq(0).children(); //table tr
trSelect = tr.eq(0).find('select');
trSelect.children().remove();
trSelect.append('<option value="">请选择表</option>');
tr.eq(1).find('select').val('');
var properties = formRender.propertiesMap[divId];
delete properties.saveColumnName;
delete properties.showColumns;
properties.userQueryColumn = {};
delete properties.ifSqlColumns;
properties.orderColumns = {};
if (params.value == '') return;
this.loadTableColumns(params.value);
},
//显示在上边的用户输入的查询字段
renderUserQueryOptionTable: function(params) {
var divId = params.item.attr('id');
var rootNode = $('#propertiesDiv');
var inputArrays = ['<select tr-index="{0}" td-index="{1}" lay-ignore style="height: 38px;border-color: #eee;width:120px;"><option value="">请选择表</option></select>',
'<select tr-index="{0}" td-index="{1}" lay-ignore style="height: 38px;border-color: #eee;width:120px;"></select>'
];
var inputEventArrays = [function(index, params, input) {
input.change(function() {
var userQueryColumn = formRender.propertiesMap[divId].userQueryColumn;
userQueryColumn.columnName = input.val();
})
}, function(index, params, input) {
input.change(function() {
var userQueryColumn = formRender.propertiesMap[divId].userQueryColumn;
userQueryColumn.ifSelect = input.val();
})
}];
var sqlIf = ['>=', '<=', '>', '<', '=', '!=', 'like']
var renderParams = {
item: params.item,
tableId: 'showUserQueryTable',
newTrButtonLabel: '用户查询条件',
tdInputArrays: inputArrays,
inputEventArrays: inputEventArrays,
newTrButtonLabelClick: 1, //不执行按钮点击事件
showRemoveButton: 1, //不显示删除行按钮
removeTrFunc: function(index, params) { //删除回调
}
}
var renderOptionsTableObject = new RenderOptionsTableObject();
renderOptionsTableObject.render(rootNode, renderParams);
$('#showUserQueryTable_button').children().remove(); //删除添加新行的图标
renderOptionsTableObject.renderNewTr(); //直接生成新行
var tds = renderOptionsTableObject.getTable().children().eq(0).children(); //最后一行
var ifSelect = tds.eq(1).find('select');
ifSelect.append('<option value="">选择</option>')
for (var i = 0; i < sqlIf.length; i++) {
ifSelect.append('<option value="{0}">{0}</option>'.format(sqlIf[i]))
}
var userQueryColumn = formRender.propertiesMap[divId].userQueryColumn;
if (userQueryColumn == undefined) userQueryColumn = {}, formRender.propertiesMap[divId].userQueryColumn = userQueryColumn;
return renderOptionsTableObject;
},
//显示要SQL查询条件
renderSqlIfOptionTable: function(params) {
var that = this;
var divId = params.item.attr('id');
var rootNode = $('#propertiesDiv');
var inputArrays = ['<select tr-index="{0}" td-index="{1}" lay-ignore style="height: 38px;border-color: #eee;width:100px;"></select>',
'<select tr-index="{0}" td-index="{1}" lay-ignore style="height: 38px;border-color: #eee;width:50px;"></select>',
'<input tr-index="{0}" td-index="{1}" type="text" class="layui-input" >'
];
var inputEventArrays = [function(index, params, input) {
input.change(function() {
var ifSqlColumns = formRender.propertiesMap[divId].ifSqlColumns[index];
ifSqlColumns.columnName = input.val();
})
}, function(index, params, input) {
input.change(function() {
var ifSqlColumns = formRender.propertiesMap[divId].ifSqlColumns[index];
ifSqlColumns.ifSelect = input.val();
})
}, function(index, params, input) {
input.focusout(function() {
var ifSqlColumns = formRender.propertiesMap[divId].ifSqlColumns[index];
ifSqlColumns.value = input.val();
})
}];
var sqlIf = ['>=', '<=', '>', '<', '=', '!=', 'like']
var renderOptionsTableObject = new RenderOptionsTableObject();
renderOptionsTableObject.render(rootNode, {
item: params.item,
tableId: 'showSqlIfTable',
newTrButtonLabel: '增加查询条件',
tdInputArrays: inputArrays,
inputEventArrays: inputEventArrays,
removeTrFunc: function(index, params) { //删除回调
formRender.propertiesMap[divId].ifSqlColumns.splice(index, 1);
},
clickCreateNewTr: function(object, params) {
var tableSelect = $('select[name="tableName"]');
if (tableSelect.val() == '') {
layui.layer.msg('请选择数据表')
return false;
}
object.renderNewTr(); //直接调用函数
//在写入新行后执行新代码
var len = object.getTable().children().length;
var tds = object.getTable().children().eq(len - 1).children(); //最后一行
var columnSelect = tds.eq(0).find('select');
that.appendColumnNameOptions(columnSelect, selectTableColumns);
var ifSqlColumns = formRender.propertiesMap[divId].ifSqlColumns;
if (ifSqlColumns == undefined) ifSqlColumns = [], formRender.propertiesMap[divId].ifSqlColumns = ifSqlColumns;
ifSqlColumns[ifSqlColumns.length] = {};
var ifSelect = tds.eq(1).find('select');
ifSelect.append('<option value="">选择</option>')
for (var i = 0; i < sqlIf.length; i++) {
ifSelect.append('<option value="{0}">{0}</option>'.format(sqlIf[i]))
}
return false; //返回false后不再往下执行
}
});
return renderOptionsTableObject;
}, //显示排序字段
renderOrderOptionTable: function(params) {
var divId = params.item.attr('id');
var rootNode = $('#propertiesDiv');
var inputArrays = ['<select name="orderColumn" tr-index="{0}" td-index="{1}" lay-ignore style="height: 38px;border-color: #eee;width:120px;"><option value="">请选择表</option></select>',
'<select name="orderType" tr-index="{0}" td-index="{1}" lay-ignore style="height: 38px;border-color: #eee;width:120px;">' +
'<option value="">选择排序方式</option><option value="asc">顺序</option><option value="desc">倒序</option></select>'
];
var inputEventArrays = [function(index, params, input) {
input.change(function() {
var orderColumns = formRender.propertiesMap[divId].orderColumns;
orderColumns.columnName = input.val();
})
}, function(index, params, input) {
input.change(function() {
var orderColumns = formRender.propertiesMap[divId].orderColumns;
orderColumns.orderType = input.val();
})
}];
var renderParams = {
item: params.item,
tableId: 'showOrderColumns',
newTrButtonLabel: '选择排序字段',
newTrButtonLabelClick: 1, //不执行按钮点击事件
showRemoveButton: 1, //不显示删除行按钮
tdInputArrays: inputArrays,
inputEventArrays: inputEventArrays,
removeTrFunc: function(index, params) { //删除回调
//formRender.propertiesMap[divId].showColumns.splice(index, 1);
}
};
var renderOptionsTableObject = new RenderOptionsTableObject();
renderOptionsTableObject.render(rootNode, renderParams);
$('#showOrderColumns_button').children().remove(); //删除添加新行的图标
renderOptionsTableObject.renderNewTr(); //直接生成新行
var orderColumns = formRender.propertiesMap[divId].orderColumns;
if (orderColumns == undefined) orderColumns = {}, formRender.propertiesMap[divId].orderColumns = orderColumns;
return renderOptionsTableObject;
}, //显示要选择显示的字段
renderShowColumnsOptionTable: function(params) {
var that = this;
var divId = params.item.attr('id');
var rootNode = $('#propertiesDiv');
var inputArrays = ['<select lay-ignore style="height: 38px;border-color: #eee;width:120px;"></select>',
'<input type="text" class="layui-input" placeholder="字段标题">'
];
var inputEventArrays = [function(index, params, input) {
input.change(function() {
var showColumns = formRender.propertiesMap[divId].showColumns[index];
showColumns.columnName = input.val();
});
}, function(index, params, input) {
input.focusout(function() {
var showColumns = formRender.propertiesMap[divId].showColumns[index];
showColumns.label = input.val();
})
}];
var renderOptionsTableObject = new RenderOptionsTableObject();
renderOptionsTableObject.render(rootNode, {
item: params.item,
tableId: 'showColumnTable',
newTrButtonLabel: '增加显示字段',
tdInputArrays: inputArrays,
inputEventArrays: inputEventArrays,
removeTrFunc: function(index, params) { //删除回调
formRender.propertiesMap[divId].showColumns.splice(index, 1);
},
clickCreateNewTr: function(object, params) {
var tableSelect = $('select[name="tableName"]');
if (tableSelect.val() == '') {
layui.layer.msg('请选择数据表')
return false;
}
object.renderNewTr(); //直接调用函数
//在写入新行后执行新代码
var len = object.getTable().children().length;
var select = object.getTable().children().eq(len - 1).find('select')
that.appendColumnNameOptions(select, selectTableColumns);
var showColumns = formRender.propertiesMap[divId].showColumns;
if (showColumns == undefined) showColumns = [], formRender.propertiesMap[divId].showColumns = showColumns;
showColumns[showColumns.length] = {};
return false; //返回false后不再往下执行
}
});
return renderOptionsTableObject;
},
appendColumnNameOptions: function(select, columnArr, selectedValue) {
select.children().remove();
select.append('<option value="">选择</option>')
for (var i = 0; i < columnArr.length; i++) {
var comment = columnArr[i].columnComment;
if (!(comment == undefined || comment == '')) {
comment = '[{0}]'.format(comment);
}
var selected = (selectedValue == columnArr[i].columnName) ? 'selected' : ''
select.append('<option value="{0}" {2}>{0}{1}</option>'.format(columnArr[i].columnName, comment, selected))
}
}
}
/**
* 生成options table的类，生成/删除表格的行，并在行中放置input
**/
function RenderOptionsTableObject() {
/**
* 增加一个有添加表格行的表格
*/
var cinit = {
table: undefined,
newTrButton: undefined,
params: undefined,
getTable: function() {
return this.table;
},
getParams: function() {
return this.params;
},
init: function(rootNode, tableId, newTrButtonLabel) {
var _buttonHtml = '<button class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" id="{1}_button">' +
'<i class="layui-icon layui-icon-add-circle-fine" style="font-size: 16px;"></i> {0}</button>\n';
_buttonHtml = _buttonHtml.format(newTrButtonLabel, tableId);
var _tableHtml = '<table width="100%" border="0" style="margin-top: 5px;" id="{0}" count="0"></table>'.format(tableId);
this.newTrButton = $(_buttonHtml);
this.table = $(_tableHtml);
rootNode.append('<br><br>').append(this.newTrButton).append(this.table);
},
/**
* 生成新的table
* @param rootNode 要绘table的上级节点
* @param params
**/
render: function(rootNode, params) {
var that = this;
that.params = params;
that.init(rootNode, params.tableId, params.newTrButtonLabel);
if (params.newTrButtonLabelClick != 1) {
that.newTrButton.click(function() {
if (params.clickCreateNewTr != undefined) { //如果有函数返回false 则不生成新行
var res = params.clickCreateNewTr(that, params);
if (!res) return;
}
that.renderNewTr();
});
}
layui.form.render();
},
/**
* 生成新的table tr
* @param params
**/
renderNewTr: function() { //生成新的table tr
var that = this;
var params = that.params;
var index = that.table.attr('count');
index++;
that.table.attr('count', index)
var tdInputArrays = params.tdInputArrays,
inputEventArrays = params.inputEventArrays;
if (tdInputArrays == undefined) tdInputArrays = [];
if (inputEventArrays == undefined) inputEventArrays = [];
var tr = $('<tr></tr>').attr('index', index);
var arrIndex = this.table.children().length;
for (var i = 0; i < tdInputArrays.length; i++) {
var td = $('<td style="padding-left: 3px;padding-top: 3px;"></td>');
var _input = tdInputArrays[i];
_input = _input.format(index, i)
var input = $(_input);
if (i < inputEventArrays.length && inputEventArrays[i] != undefined) inputEventArrays[i](arrIndex, params, input);
td.append(input);
tr.append(td);
}
if (params.showRemoveButton != 1) { //显示删除按钮
var td = $('<td align="center" style="padding-left: 3px;padding-top: 3px;"></td>\n');
//删除一行
var closeHtml = $('<i class="layui-icon layui-icon-close-fill" style="font-size: 2em;color: #c7ced5;cursor:pointer"></i>');
that.deleteTr(closeHtml);
td.append(closeHtml);
tr.append(td);
}
that.table.append(tr);
layui.form.render()
},
cleanTable: function() {
this.table.children().remove();
},
/**
* 得到当前tr在table里的index
* @param trIndex 在 tr 上的 index attr
* @returns {number}
*/
queryTrIndex: function(trIndex) {
var index = 0;
this.table.children().each(function(i, e) {
var _index = $(this).attr('index');
if (_index == trIndex) {
index = i;
return false;
}
});
return index;
},
/**
* 删除表格的行，并触发删除事件
* @param closeHtml 触发事件的组件
* @param params
*/
deleteTr: function(closeHtml) {
var that = this;
closeHtml.click(function() { //delete
var parent = $(this).parent().parent();
var trIndex = parent.attr('index');
var dataArrayIndex = that.queryTrIndex(trIndex);
if (that.params.removeTrFunc != undefined) that.params.removeTrFunc(dataArrayIndex, {
params: that.params,
});
parent.remove();
layui.form.render();
});
}
}
return cinit;
}
var request = function(key) {
return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
}
try {
layui.layer.msg('从左侧拖动组件到中间虚线区域，再选中组件设置属性');
var top = $('.adminj-ds-center').css('top');
if (isNaN(top)) {
if (top.indexOf('px') != -1) {
top = top.substring(0, top.indexOf('px'));
}
if (isNaN(top)) top = 0;
}
var winHeight = $(window).height() - 10;
$('.adminj-ds-center').css('min-height', winHeight - top - 20)
try {
//var json = "[{\"id\":\"popTableSelect\",\"name\":\"name1631601581717\",\"required\":\"\",\"disabled\":\"\",\"labelWidth\":80,\"rowWidth\":100,\"inputWidth\":60,\"resultSelectType\":\"0\",\"orderColumns\":{\"orderType\":\"desc\",\"columnName\":\"id\"},\"userQueryColumn\":{\"ifSelect\":\"like\",\"columnName\":\"title\"},\"defValue\":\"admin\",\"tableName\":\"cms_table\",\"saveColumnName\":\"id\",\"showColumns\":[{\"label\":\"admina\",\"columnName\":\"table_name\"},{\"label\":\"bb\",\"columnName\":\"user_insert_form_url\"},{},{}],\"ifSqlColumns\":[{\"value\":\"0\",\"columnName\":\"type\",\"ifSelect\":\"=\"},{\"value\":\"66\",\"columnName\":\"table_name\",\"ifSelect\":\"<\"},{},{},{},{}],\"divId\":\"did_1631689596473_0\"},{\"id\":\"selectS\",\"name\":\"name1631601717664\",\"required\":\"\",\"disabled\":\"\",\"labelWidth\":80,\"rowWidth\":100,\"options\":[],\"requestURL\":\"admin\",\"divId\":\"did_1631689596478_1\"}]";
//var arr = JSON.parse(json);
var getFunc = request('getFunc');
if (stringIsEmpty(getFunc)) getFunc = 'parent._iframeWin.getSelectedColumnInput';
var _json = eval(getFunc)();
console.log(_json)
var json = JSON.parse(_json);
if (Array.isArray(json)) {
formRender.importJSON(json)
} else {
var arr = [];
arr[0] = json;
formRender.importJSON(arr)
}
} catch (e) {
console.log(e);
}
$('#clean').click(function() {
layui.adminJLayuiFormRender.clean();
});
$('#exportJSON').click(function() {
var str = formRender.exportJSON();
var json = JSON.parse(str);
//console.log(str)return;
var formType = request('formType');
if (formType == 'single') {
if (json.length == 0) {
layui.layer.msg('请选择一个html from');
return;
}
if (json.length > 1) {
layui.layer.msg('且能选择一个html from');
return;
}
}
try {
var setFunc = request('setFunc');
if (stringIsEmpty(setFunc)) setFunc = 'parent._iframeWin.selectedColumnInput';
//var setFunc=request('getFunc');
//if(stringIsEmpty(setFunc))setFunc='parent._iframeWin.selectedColumnInput';
var index = parent.layer.getFrameIndex(window.name);
eval(setFunc)(json);
parent.layer.close(index);
} catch (e) {
alert("select icon error:" + e);
}
})
} catch (e) {
alert("error:" + e)
}
});
</script>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化