继续重构模块列表前端样式

This commit is contained in:
2021-03-17 03:15:10 +08:00
parent 181fa17fdd
commit cd3a44340e
192 changed files with 3321 additions and 4596 deletions
+34 -46
View File
@@ -1,54 +1,42 @@
{{$header["js"]}}
<div class="panel no-border" id="{{$header['master_table']}}-controller">
@include('headers')
<div class='list-jqgrid'>
<div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
<div class="gdoo-list panel">
<div class="gdoo-list-header">
<gdoo-grid-header :header="header" :grid="grid" :action="action" />
</div>
<div class='gdoo-list-grid'>
<div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
</div>
</div>
</div>
<script>
(function ($) {
Vue.createApp({
components: {
gdooGridHeader,
},
setup(props, ctx) {
var table = '{{$header["master_table"]}}';
var config = gdoo.grids[table];
var config = new gdoo.grid(table);
var grid = config.grid;
grid.remoteDataUrl = '{{url()}}';
grid.autoColumnsToFit = true;
var action = config.action;
var search = config.search;
// 双击行执行的方法
action.rowDoubleClick = null;
action.dialogType = 'dialog';
var setup = config.setup;
var options = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
gridDiv.style.height = getPanelHeight(48);
options.remoteDataUrl = '{{url()}}';
options.remoteParams = search.advanced.query;
options.columnDefs = config.cols;
options.onRowDoubleClicked = function (params) {
if (params.node.rowPinned) {
return;
}
if (params.data == undefined) {
return;
}
if (params.data.master_id > 0) {
action.show(params.data);
}
};
new agGrid.Grid(gridDiv, options);
// 读取数据
options.remoteData({page: 1});
// 绑定自定义事件
var $gridDiv = $(gridDiv);
$gridDiv.on('click', '[data-toggle="event"]', function () {
var data = $(this).data();
if (data.master_id > 0) {
action[data.action](data);
}
Vue.onMounted(function() {
var gridDiv = config.div(93);
// 初始化数据
grid.remoteData({page: 1}, function(res) {
config.init(res);
});
});
config.grid = options;
})(jQuery);
</script>
@include('footers')
return setup;
}
}).mount("#{{$header['master_table']}}-page");
</script>
+36 -48
View File
@@ -1,19 +1,31 @@
{{$header["js"]}}
<div class="panel no-border" id="{{$header['master_table']}}-controller">
@include('headers')
<div class='list-jqgrid'>
<div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
<div class="gdoo-list panel">
<div class="gdoo-list-header">
<gdoo-grid-header :header="header" :grid="grid" :action="action" />
</div>
<div class='gdoo-list-grid'>
<div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
</div>
</div>
</div>
<script>
(function ($) {
var table = '{{$header["master_table"]}}';
var config = gdoo.grids[table];
var action = config.action;
var search = config.search;
action.dialogType = 'dialog';
<script>
Vue.createApp({
components: {
gdooGridHeader,
},
setup(props, ctx) {
var table = '{{$header["master_table"]}}';
var config = new gdoo.grid(table);
var grid = config.grid;
grid.remoteDataUrl = '{{url()}}';
grid.autoColumnsToFit = true;
var action = config.action;
// 双击行执行的方法
action.rowDoubleClick = action.edit;
action.test = function() {
var me = this;
@@ -39,40 +51,16 @@
}
}
var options = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
gridDiv.style.height = getPanelHeight(48);
var setup = config.setup;
options.remoteDataUrl = '{{url()}}';
options.remoteParams = search.advanced.query;
options.columnDefs = config.cols;
options.onRowDoubleClicked = function (params) {
if (params.node.rowPinned) {
return;
}
if (params.data == undefined) {
return;
}
if (params.data.master_id > 0) {
action.edit(params.data);
}
};
new agGrid.Grid(gridDiv, options);
// 读取数据
options.remoteData({page: 1});
// 绑定自定义事件
var $gridDiv = $(gridDiv);
$gridDiv.on('click', '[data-toggle="event"]', function () {
var data = $(this).data();
if (data.master_id > 0) {
action[data.action](data);
}
Vue.onMounted(function() {
var gridDiv = config.div(93);
// 初始化数据
grid.remoteData({page: 1}, function(res) {
config.init(res);
});
});
config.grid = options;
})(jQuery);
</script>
@include('footers')
return setup;
}
}).mount("#{{$header['master_table']}}-page");
</script>
+36 -67
View File
@@ -1,44 +1,29 @@
{{$header["js"]}}
<div class="panel no-border" id="{{$header['master_table']}}-controller">
@include('headers')
<div class='list-jqgrid'>
<div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
<div class="gdoo-list panel">
<div class="gdoo-list-header">
<gdoo-grid-header :header="header" :grid="grid" :action="action" />
</div>
<div class='gdoo-list-grid'>
<div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
</div>
</div>
</div>
<script>
(function ($) {
Vue.createApp({
components: {
gdooGridHeader,
},
setup(props, ctx) {
var table = '{{$header["master_table"]}}';
var config = gdoo.grids[table];
var action = config.action;
var search = config.search;
action.dialogType = 'dialog';
var config = new gdoo.grid(table);
action.field = function(data) {
var me = this;
var grid = config.grid;
var url = app.url('model/field/index', {model_id: data.master_id});
var index = layer.open({
skin: 'layui-layer-frame',
scrollbar: false,
closeBtn: 2,
title: data.master_name + '[字段]',
type: 2,
move: false,
area: ['100%', '100%'],
content: url,
});
}
var grid = config.grid;
grid.remoteDataUrl = '{{url()}}';
grid.autoColumnsToFit = true;
var options = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
gridDiv.style.height = getPanelHeight(48);
config.cols[0]['hide'] = true;
config.cols[1]['hide'] = true;
config.cols[2]['hide'] = true;
options.autoGroupColumnDef = {
grid.autoGroupColumnDef = {
headerName: '名称',
width: 120,
cellRendererParams: {
@@ -46,42 +31,26 @@
suppressCount: true,
}
};
options.treeData = true;
options.groupDefaultExpanded = -1;
options.getDataPath = function(data) {
grid.treeData = true;
grid.groupDefaultExpanded = -1;
grid.getDataPath = function(data) {
return data.tree_path;
};
options.remoteDataUrl = '{{url()}}';
options.remoteParams = search.advanced.query;
options.columnDefs = config.cols;
options.onRowDoubleClicked = function (params) {
if (params.node.rowPinned) {
return;
}
if (params.data == undefined) {
return;
}
if (params.data.master_id > 0) {
action.edit(params.data);
}
};
var action = config.action;
// 双击行执行的方法
action.rowDoubleClick = action.edit;
new agGrid.Grid(gridDiv, options);
var setup = config.setup;
// 读取数据
options.remoteData({page: 1});
// 绑定自定义事件
var $gridDiv = $(gridDiv);
$gridDiv.on('click', '[data-toggle="event"]', function () {
var data = $(this).data();
if (data.master_id > 0) {
action[data.action](data);
}
Vue.onMounted(function() {
var gridDiv = config.div(93);
// 初始化数据
grid.remoteData({page: 1}, function(res) {
config.init(res);
});
});
config.grid = options;
})(jQuery);
</script>
@include('footers')
return setup;
}
}).mount("#{{$header['master_table']}}-page");
</script>
+56 -68
View File
@@ -1,25 +1,24 @@
{{$header["js"]}}
<div class="panel no-border m-b-sm" id="{{$header['table']}}-controller">
@include('headers')
<div class="col-xs-4 col-sm-2">
<div class="list-jqgrid">
<div id="{{$header['table']}}-tree" style="width:100%;" class="tree-grid ag-theme-balham"></div>
<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
<div class="gdoo-list panel">
<div class="gdoo-list-header">
<gdoo-grid-header :header="header" :grid="grid" :action="action" />
</div>
<div class="gdoo-list-grid">
<div class="col-xs-4 col-sm-2">
<div id="{{$header['master_table']}}-tree" class="tree-grid ag-theme-balham"></div>
</div>
<div class="col-xs-8 col-sm-10">
<div id="{{$header['master_table']}}-grid" class="list-grid ag-theme-balham"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="col-xs-8 col-sm-10">
<div id="{{$header['table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
</div>
<div class="clearfix"></div>
</div>
<style>
.tree-grid.ag-theme-balham {
border-right: 1px solid #BDC3C7;
}
.tree-grid.ag-theme-balham .ag-ltr .ag-cell {
border-width: 0 0 0 0;
border-right-color: #d9dcde;
@@ -40,6 +39,7 @@
.tree-box .ul {
margin-bottom: 0;
}
.col-xs-4 {
padding-right: 0;
padding-left: 5px;
@@ -48,6 +48,7 @@
padding-left: 5px;
padding-right: 5px;
}
@media screen and (min-width: 768px) {
.col-sm-2 {
padding-right: 0;
@@ -59,66 +60,53 @@
}
}
</style>
<script>
var table = '{{$header["table"]}}';
var config = gdoo.grids[table];
var action = config.action;
var search = config.search;
(function ($) {
var height = getPanelHeight(98);
var treeOptions = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['table']}}-tree");
gridDiv.style.height = height;
treeOptions.columnDefs = [
{cellClass:'text-left', field: 'name', headerName: '枚举类别'},
];
treeOptions.onRowClicked = function (params) {
if (params.data.id >= 0) {
var query = search.simple.query;
Vue.createApp({
components: {
gdooGridHeader,
},
setup(props, ctx) {
var table = '{{$header["master_table"]}}';
var tree = new agGridOptions();
tree.columnDefs = [
{cellClass:'text-left', field: 'name', headerName: '枚举类别'},
];
tree.onRowClicked = function (params) {
var query = {};
query['parent_id'] = params.data.id;
query['page'] = 1;
config.grid.remoteData(query);
}
};
treeOptions.remoteDataUrl = "{{url('category')}}";
new agGrid.Grid(gridDiv, treeOptions);
// 读取数据
treeOptions.remoteData();
};
tree.remoteDataUrl = "{{url('category')}}";
var options = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['table']}}-grid");
gridDiv.style.height = height;
options.remoteDataUrl = '{{url()}}';
options.remoteParams = search.advanced.query;
options.columnDefs = config.cols;
options.onRowDoubleClicked = function (params) {
if (params.node.rowPinned) {
return;
}
if (params.data == undefined) {
return;
}
if (params.data.id > 0) {
action.edit(params.data);
}
};
var config = new gdoo.grid(table);
new agGrid.Grid(gridDiv, options);
var grid = config.grid;
grid.autoColumnsToFit = true;
grid.remoteDataUrl = '{{url()}}';
// 读取数据
options.remoteData({page: 1});
var action = config.action;
// 双击行执行的方法
action.rowDoubleClick = action.edit;
// 绑定自定义事件
var $gridDiv = $(gridDiv);
$gridDiv.on('click', '[data-toggle="event"]', function () {
var data = $(this).data();
if (data.master_id > 0) {
action[data.action](data);
}
});
var setup = config.setup;
config.grid = options;
Vue.onMounted(function() {
var height = 93;
var treeDiv = document.querySelector('#' + table + '-tree');
treeDiv.style.height = config.getPanelHeight(height);
new agGrid.Grid(treeDiv, tree);
tree.remoteData();
})(jQuery);
</script>
@include('footers')
var gridDiv = config.div(height);
// 初始化数据
grid.remoteData({page: 1}, function(res) {
config.init(res);
});
});
return setup;
}
}).mount("#{{$header['master_table']}}-page");
</script>
+71 -86
View File
@@ -1,25 +1,24 @@
{{$header["js"]}}
<div class="panel no-border m-b-sm" id="{{$header['table']}}-controller">
@include('headers')
<div class="col-xs-4 col-sm-2">
<div class="list-jqgrid">
<div id="{{$header['table']}}-tree" style="width:100%;" class="tree-grid ag-theme-balham"></div>
<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
<div class="gdoo-list panel">
<div class="gdoo-list-header">
<gdoo-grid-header :header="header" :grid="grid" :action="action" />
</div>
<div class="gdoo-list-grid">
<div class="col-xs-4 col-sm-2">
<div id="{{$header['master_table']}}-tree" class="tree-grid ag-theme-balham"></div>
</div>
<div class="col-xs-8 col-sm-10">
<div id="{{$header['master_table']}}-grid" class="list-grid ag-theme-balham"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="col-xs-8 col-sm-10">
<div id="{{$header['table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
</div>
<div class="clearfix"></div>
</div>
<style>
.tree-grid.ag-theme-balham {
border-right: 1px solid #BDC3C7;
}
.tree-grid.ag-theme-balham .ag-ltr .ag-cell {
border-width: 0 0 0 0;
border-right-color: #d9dcde;
@@ -40,6 +39,7 @@
.tree-box .ul {
margin-bottom: 0;
}
.col-xs-4 {
padding-right: 0;
padding-left: 5px;
@@ -48,6 +48,7 @@
padding-left: 5px;
padding-right: 5px;
}
@media screen and (min-width: 768px) {
.col-sm-2 {
padding-right: 0;
@@ -59,85 +60,69 @@
}
}
</style>
<script>
var table = '{{$header["table"]}}';
var config = gdoo.grids[table];
var action = config.action;
var search = config.search;
(function ($) {
var height = getPanelHeight(163);
var treeOptions = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['table']}}-tree");
gridDiv.style.height = height;
Vue.createApp({
components: {
gdooGridHeader,
},
setup(props, ctx) {
var table = '{{$header["master_table"]}}';
treeOptions.autoGroupColumnDef = {
headerName: '行政区域',
width: 250,
sortable: false,
suppressMenu: true,
cellRendererParams: {
suppressCount: false,
}
};
treeOptions.treeData = true;
treeOptions.groupDefaultExpanded = -1;
treeOptions.getDataPath = function(data) {
return data.tree_path;
};
treeOptions.enableCellTextSelection = false;
treeOptions.treeData = true;
treeOptions.groupDefaultExpanded = 1;
treeOptions.onRowClicked = function (params) {
if (params.data.id > 0) {
var query = search.simple.query;
var tree = new agGridOptions();
tree.rowSelection = 'single';
tree.autoGroupColumnDef = {
headerName: '类别名称',
width: 250,
sortable: false,
suppressMenu: true,
cellRendererParams: {
suppressCount: true,
}
};
tree.treeData = true;
tree.groupDefaultExpanded = -1;
tree.getDataPath = function(data) {
return data.tree_path;
};
tree.columnDefs = [];
tree.rowSelection = 'single';
tree.enableCellTextSelection = false;
tree.onRowClicked = function (params) {
var query = {};
query['parent_id'] = params.data.id;
query['page'] = 1;
config.grid.remoteData(query);
}
};
treeOptions.remoteDataUrl = "{{url('category')}}";
treeOptions.columnDefs = [];
new agGrid.Grid(gridDiv, treeOptions);
// 读取数据
treeOptions.remoteData();
};
tree.remoteDataUrl = "{{url('category')}}";
var options = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['table']}}-grid");
gridDiv.style.height = height;
options.remoteDataUrl = '{{url()}}';
options.remoteParams = search.advanced.query;
options.columnDefs = config.cols;
options.onRowDoubleClicked = function (params) {
if (params.node.rowPinned) {
return;
}
if (params.data == undefined) {
return;
}
if (params.data.id > 0) {
action.edit(params.data);
}
};
var config = new gdoo.grid(table);
new agGrid.Grid(gridDiv, options);
var grid = config.grid;
grid.autoColumnsToFit = true;
grid.remoteDataUrl = '{{url()}}';
// 读取数据
options.remoteData({page: 1});
var action = config.action;
// 双击行执行的方法
action.rowDoubleClick = action.edit;
// 绑定自定义事件
var $gridDiv = $(gridDiv);
$gridDiv.on('click', '[data-toggle="event"]', function () {
var data = $(this).data();
if (data.master_id > 0) {
action[data.action](data);
}
});
var setup = config.setup;
config.grid = options;
Vue.onMounted(function() {
var height = 136;
var treeDiv = document.querySelector('#' + table + '-tree');
treeDiv.style.height = config.getPanelHeight(height);
new agGrid.Grid(treeDiv, tree);
tree.remoteData();
})(jQuery);
</script>
@include('footers')
var gridDiv = config.div(height);
// 初始化数据
grid.remoteData({page: 1}, function(res) {
config.init(res);
});
});
return setup;
}
}).mount("#{{$header['master_table']}}-page");
</script>
+34 -46
View File
@@ -1,54 +1,42 @@
{{$header["js"]}}
<div class="panel no-border" id="{{$header['master_table']}}-controller">
@include('headers')
<div class='list-jqgrid'>
<div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
<div class="gdoo-list panel">
<div class="gdoo-list-header">
<gdoo-grid-header :header="header" :grid="grid" :action="action" />
</div>
<div class='gdoo-list-grid'>
<div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
</div>
</div>
</div>
<script>
(function ($) {
Vue.createApp({
components: {
gdooGridHeader,
},
setup(props, ctx) {
var table = '{{$header["master_table"]}}';
var config = gdoo.grids[table];
var config = new gdoo.grid(table);
var grid = config.grid;
grid.remoteDataUrl = '{{url()}}';
grid.autoColumnsToFit = true;
var action = config.action;
var search = config.search;
// 双击行执行的方法
action.rowDoubleClick = action.edit;
action.dialogType = 'dialog';
var options = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
gridDiv.style.height = getPanelHeight(48);
var setup = config.setup;
options.remoteDataUrl = '{{url()}}';
options.remoteParams = search.advanced.query;
options.columnDefs = config.cols;
options.onRowDoubleClicked = function (params) {
if (params.node.rowPinned) {
return;
}
if (params.data == undefined) {
return;
}
if (params.data.master_id > 0) {
action.edit(params.data);
}
};
new agGrid.Grid(gridDiv, options);
// 读取数据
options.remoteData({page: 1});
// 绑定自定义事件
var $gridDiv = $(gridDiv);
$gridDiv.on('click', '[data-toggle="event"]', function () {
var data = $(this).data();
if (data.master_id > 0) {
action[data.action](data);
}
Vue.onMounted(function() {
var gridDiv = config.div(93);
// 初始化数据
grid.remoteData({page: 1}, function(res) {
config.init(res);
});
});
config.grid = options;
})(jQuery);
</script>
@include('footers')
return setup;
}
}).mount("#{{$header['master_table']}}-page");
</script>
@@ -1,54 +0,0 @@
{{$header["js"]}}
<div class="panel no-border" id="{{$header['master_table']}}-controller">
@include('headers')
<div class='list-jqgrid'>
<div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
</div>
</div>
<script>
(function ($) {
var table = '{{$header["master_table"]}}';
var config = gdoo.grids[table];
var action = config.action;
var search = config.search;
action.dialogType = 'dialog';
var options = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
gridDiv.style.height = getPanelHeight(48);
options.remoteDataUrl = '{{url()}}';
options.remoteParams = search.advanced.query;
options.columnDefs = config.cols;
options.onRowDoubleClicked = function (params) {
if (params.node.rowPinned) {
return;
}
if (params.data == undefined) {
return;
}
if (params.data.master_id > 0) {
action.show(params.data);
}
};
new agGrid.Grid(gridDiv, options);
// 读取数据
options.remoteData({page: 1});
// 绑定自定义事件
var $gridDiv = $(gridDiv);
$gridDiv.on('click', '[data-toggle="event"]', function () {
var data = $(this).data();
if (data.master_id > 0) {
action[data.action](data);
}
});
config.grid = options;
})(jQuery);
</script>
@include('footers')
+36 -48
View File
@@ -1,19 +1,31 @@
{{$header["js"]}}
<div class="panel no-border" id="{{$header['master_table']}}-controller">
@include('headers')
<div class='list-jqgrid'>
<div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
<div class="gdoo-list panel">
<div class="gdoo-list-header">
<gdoo-grid-header :header="header" :grid="grid" :action="action" />
</div>
<div class='gdoo-list-grid'>
<div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
</div>
</div>
</div>
<script>
(function ($) {
var table = '{{$header["master_table"]}}';
var config = gdoo.grids[table];
var action = config.action;
var search = config.search;
action.dialogType = 'dialog';
<script>
Vue.createApp({
components: {
gdooGridHeader,
},
setup(props, ctx) {
var table = '{{$header["master_table"]}}';
var config = new gdoo.grid(table);
var grid = config.grid;
grid.remoteDataUrl = '{{url()}}';
grid.autoColumnsToFit = true;
var action = config.action;
// 双击行执行的方法
action.rowDoubleClick = action.edit;
action.test = function() {
var me = this;
@@ -39,40 +51,16 @@
}
}
var options = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
gridDiv.style.height = getPanelHeight(48);
var setup = config.setup;
options.remoteDataUrl = '{{url()}}';
options.remoteParams = search.advanced.query;
options.columnDefs = config.cols;
options.onRowDoubleClicked = function (params) {
if (params.node.rowPinned) {
return;
}
if (params.data == undefined) {
return;
}
if (params.data.master_id > 0) {
action.edit(params.data);
}
};
new agGrid.Grid(gridDiv, options);
// 读取数据
options.remoteData({page: 1});
// 绑定自定义事件
var $gridDiv = $(gridDiv);
$gridDiv.on('click', '[data-toggle="event"]', function () {
var data = $(this).data();
if (data.master_id > 0) {
action[data.action](data);
}
Vue.onMounted(function() {
var gridDiv = config.div(93);
// 初始化数据
grid.remoteData({page: 1}, function(res) {
config.init(res);
});
});
config.grid = options;
})(jQuery);
</script>
@include('footers')
return setup;
}
}).mount("#{{$header['master_table']}}-page");
</script>
@@ -0,0 +1,42 @@
<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
<div class="gdoo-list panel">
<div class="gdoo-list-header">
<gdoo-grid-header :header="header" :grid="grid" :action="action" />
</div>
<div class='gdoo-list-grid'>
<div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
</div>
</div>
</div>
<script>
Vue.createApp({
components: {
gdooGridHeader,
},
setup(props, ctx) {
var table = '{{$header["master_table"]}}';
var config = new gdoo.grid(table);
var grid = config.grid;
grid.remoteDataUrl = '{{url()}}';
grid.autoColumnsToFit = true;
var action = config.action;
// 双击行执行的方法
action.rowDoubleClick = null;
var setup = config.setup;
Vue.onMounted(function() {
var gridDiv = config.div(93);
// 初始化数据
grid.remoteData({page: 1}, function(res) {
config.init(res);
});
});
return setup;
}
}).mount("#{{$header['master_table']}}-page");
</script>
+37 -49
View File
@@ -1,19 +1,31 @@
{{$header["js"]}}
<div class="panel no-border" id="{{$header['master_table']}}-controller">
@include('headers')
<div class='list-jqgrid'>
<div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
<div class="gdoo-list panel">
<div class="gdoo-list-header">
<gdoo-grid-header :header="header" :grid="grid" :action="action" />
</div>
<div class='gdoo-list-grid'>
<div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
</div>
</div>
</div>
<script>
(function ($) {
var table = '{{$header["master_table"]}}';
var config = gdoo.grids[table];
var action = config.action;
var search = config.search;
action.dialogType = 'dialog';
<script>
Vue.createApp({
components: {
gdooGridHeader,
},
setup(props, ctx) {
var table = '{{$header["master_table"]}}';
var config = new gdoo.grid(table);
var grid = config.grid;
grid.remoteDataUrl = '{{url()}}';
grid.autoColumnsToFit = true;
var action = config.action;
// 双击行执行的方法
action.rowDoubleClick = null;
action.refresh = function() {
var me = this;
@@ -22,7 +34,7 @@
});
$.post(app.url('system/widget/refresh'), function(res) {
if (res.status) {
options.remoteData({page: 1});
grid.remoteData({page: 1});
toastrSuccess(res.data);
} else {
toastrError(res.data);
@@ -31,41 +43,17 @@
layer.close(loading);
});
}
var options = new agGridOptions();
var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
gridDiv.style.height = getPanelHeight(48);
options.remoteDataUrl = '{{url()}}';
options.remoteParams = search.advanced.query;
options.columnDefs = config.cols;
options.onRowDoubleClicked = function (params) {
if (params.node.rowPinned) {
return;
}
if (params.data == undefined) {
return;
}
if (params.data.master_id > 0) {
action.edit(params.data);
}
};
var setup = config.setup;
new agGrid.Grid(gridDiv, options);
// 读取数据
options.remoteData({page: 1});
// 绑定自定义事件
var $gridDiv = $(gridDiv);
$gridDiv.on('click', '[data-toggle="event"]', function () {
var data = $(this).data();
if (data.master_id > 0) {
action[data.action](data);
}
Vue.onMounted(function() {
var gridDiv = config.div(93);
// 初始化数据
grid.remoteData({page: 1}, function(res) {
config.init(res);
});
});
config.grid = options;
})(jQuery);
</script>
@include('footers')
return setup;
}
}).mount("#{{$header['master_table']}}-page");
</script>