gridTable1 list data is the sub-data of gridTable’s other table data. When gridTable is clicked, gridTable1 list data is updated.
@{
Layout = "~/Views/Shared/_Index.cshtml";
}
<div class="container-div">
<div class="row">
<div id="searchDiv" class="col-sm-12 search-collapse">
<div class="select-list">
<ul>
<li>
Contract name: <input id="name" col="name" type="text" />
</li>
<li>
Signing time: <input id="signDate" col="signDate" type="text" />
</li>
<li>
Person in charge: <input id="headUser" col="headUser" type="text" />
</li>
<li>
Review status: <input id="status" col="status" type="text" />
</li>
<li>
<a id="btnSearch" class="btn btn-primary btn-sm" onclick="searchGrid()"><i class="fa fa-search"></i> & amp;nbsp;Search</a >
</li>
</ul>
</div>
</div>
<div class="btn-group-sm hidden-xs" id="toolbar">
<a id="btnAdd" class="btn btn-success" onclick="showSaveForm(true)"><i class="fa fa-plus"></i> Add</a>
<a id="btnEdit" class="btn btn-primary disabled" onclick="showSaveForm(false)"><i class="fa fa-edit"></i> Edit</a>
<a id="btnDelete" class="btn btn-danger disabled" onclick="deleteForm()"><i class="fa fa-remove"></i> Delete</a>
</div>
<div class="btn-group-sm hidden-xs" id="toolbar">
<a id="btnAddDetail" class="btn btn-success" onclick="showSaveDetailForm(true)"><i class="fa fa-plus"></i> Add</a>
<a id="btnEditDetail" class="btn btn-primary disabled" onclick="showSaveDetailForm(false)"><i class="fa fa-edit"></i> Edit</a>
<a id="btnDeleteDetail" class="btn btn-danger disabled" onclick="deleteDetailForm()"><i class="fa fa-remove"></i> Delete</a>
</div>
<div class="col-sm-12 select-table table-striped" style="min-height: 47%;max-height: 47%">
<table id="gridTable" data-mobile-responsive="true"></table>
</div>
<div class="col-sm-12 select-table table-striped" style="min-height: 47%;max-height: 47%">
<table id="gridTable1" data-mobile-responsive="true"></table>
</div>
</div>
</div>
<script type="text/javascript">
var curContractId = '0'
$(function () {
initGrid();
initDetailGrid('0');
});
function initGrid() {
var queryUrl = '@Url.Content("~/ContractManage/Salesmanagement/GetPageListJson")';
$('#gridTable').ysTable({
url: queryUrl,
height:'350',
onClickRow: function (row) {//Click event, click to trigger gridTable1 table data update
console.log('click',row.Id)
refreshDetailGrid({ ContractId :row.Id});//Render detailed list data
},
columns: [
{ checkbox: true, visible: true },
{ field: 'Id', title: 'Id', visible: false },
{ field: 'name', title: 'Contract name' },
{ field: 'signDate', title: 'Signing time' },
//{ field: 'contractNum', title: 'Contract Code' },
//{ field: 'internalcontractNum', title: 'Internal contract number' },
{ field: 'internalUnit', title: 'Requirement unit' },
{ field: 'batchName', title: 'batch name' },
//{ field: 'proId', title: 'productid', visible: false },
//{ field: 'proName', title: 'Product Name' },
//{ field: 'model', title: 'model' },
{ field: 'businessType', title: 'business type' },
//{ field: 'numbers', title: 'number' },
//{ field: 'unit', title: 'unit' },
{ field: 'contractAllMonwy', title: 'Total contract amount' },
{ field: 'mateMoney', title: 'Total Match' },
{ field: 'performanceMoney', title: 'Performance amount' },
{ field: 'unPerformanceMoney', title: 'Unperformed amount' },
{ field: 'invoicingMoney', title: 'Invoicing amount' },
{ field: 'unInvoicingMoney', title: 'Matched uninvoiced amount' },
{
field: 'documentLink', title: 'Contract Document',
formatter: function (value, row, index) {
if (value != '') {
return '<a href="' + value + '">Download</a>'
}
}
},
{ field: 'headUser', title: 'Responsible person' },
{ field: 'addDate', title: 'Add time' },
{
field: 'status', title: 'Audit status',
formatter: function (value, row, index) {
if (value == "@VerifyEnum.Pass.ParseToInt()") {
return '<span class="badge badge-primary">' + "@VerifyEnum.Pass.GetDescription()" + '</span>';
}
else if (value == "@VerifyEnum.UnPass.ParseToInt()") {
return '<span class="badge badge-danger">' + "@VerifyEnum.UnPass.GetDescription()" + '</span>';
}
else {
return '<span class="badge badge-warning">' + "@VerifyEnum.Wait.GetDescription()" + '</span>';
}
}
},
{
field: 'orderStatus', title: 'Order Status',
formatter: function (value, row, index) {
if (value == "@SalesOrderEnum.Ordered.ParseToInt()") {
return '<span class="badge badge-primary">' + "@SalesOrderEnum.Ordered.GetDescription()" + '</span>';
}
else if (value == "@SalesOrderEnum.Produced.ParseToInt()") {
return '<span class="badge badge-primary">' + "@SalesOrderEnum.Produced.GetDescription()" + '</span>';
}
else if (value == "@SalesOrderEnum.Shipped.ParseToInt()") {
return '<span class="badge badge-primary">' + "@SalesOrderEnum.Shipped.GetDescription()" + '</span>';
}
else if (value == "@SalesOrderEnum.Received.ParseToInt()") {
return '<span class="badge badge-primary">' + "@SalesOrderEnum.Received.GetDescription()" + '</span>';
}
else if (value == "@SalesOrderEnum.Invoiced.ParseToInt()") {
return '<span class="badge badge-primary">' + "@SalesOrderEnum.Invoiced.GetDescription()" + '</span>';
}
else {
return '<span class="badge badge-warning">' + "@SalesOrderEnum.Wait.GetDescription()" + '</span>';
}
}
},
{
title: 'Operation',
align: 'center',
formatter: function (value, row, index) {
var actions = [];
if (row.status == 0) {
actions.push('<a class="btn btn-warning btn-xs" href="#" onclick="SubVaild('' + row.Id + '')">Audit </a> ');
}
actions.push('<a class="btn btn-warning btn-xs" href="#" onclick="address('' + row.Id + '')" style="margin-left:2px" >Contract archives</a>');
actions.push('<a class="btn btn-warning btn-xs" href="#" onclick="detail('' + row.Id + '')" style="margin-left:2px" >Details</a>');
return actions.join('');
}
}
],
queryParams: function (params) {
var pagination = $('#gridTable').ysTable('getPagination', params);
var queryString = $('#searchDiv').getWebControls(pagination);
return queryString;
}
});
}
function initDetailGrid() {
var queryUrl = '@Url.Content("~/ContractManage/SealsManagementDetail/GetPageListJson")';
console.log("initDetailGrid");
$('#gridTable1').ysTable({
url: queryUrl,
height: '350',
columns: [
{ checkbox: true, visible: true },
{ field: 'Id', title: 'Id', visible: false },
{ field: 'Name', title: 'Name' },
{ field: 'BatchName', title: 'Batch Name' },
{ field: 'Model', title: 'Model' },
{ field: 'Specs', title: 'Specifications' },
{ field: 'Unit', title: 'unit' },
{ field: 'Number', title: 'Quantity' },
],
queryParams: function (params) {
var pagination = $('#gridTable1').ysTable('getPagination', params);
var queryString = $('#searchDiv1').getWebControls(pagination);
queryString.ContractId = curContractId;//Retrieve detailed parameters
console.log('queryString', queryString);
return queryString;
}
});
}
function searchGrid() {
$('#gridTable').ysTable('search');
resetToolbarStatus();
refreshDetailGrid({ ContractId: '0' });//Clear gridTable1 list data when initializing gridTable
}
function refreshDetailGrid(params){//Click the main table row to trigger the event, refresh the detailed table data to the current clicked main table row detail data
curContractId = params.ContractId//Assignment to retrieve detailed parameters
$('#gridTable1').ysTable('search');//Query the gridTable1 table with more conditions
}
function showSaveForm(bAdd) {
var id = 0;
if (!bAdd) {
var selectedRow = $('#gridTable').bootstrapTable('getSelections');
if (!ys.checkRowEdit(selectedRow)) {
return;
}
else {
id = selectedRow[0].Id;
}
}
ys.openDialog({
title: id > 0 ? 'Edit' : 'Add',
content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementForm")' + '?id=' + id,
width: '968px',
height: '750px',
callback: function (index, layero) {
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.saveForm(index);
}
});
}
function deleteForm() {
var selectedRow = $('#gridTable').bootstrapTable('getSelections');
if (ys.checkRowDelete(selectedRow)) {
ys.confirm('Are you sure you want to delete the selected' + selectedRow.length + 'piece of data?', function () {
var ids = ys.getIds(selectedRow);
ys.ajax({
url: '@Url.Content("~/ContractManage/Salesmanagement/DeleteFormJson")' + '?ids=' + ids,
type: 'post',
success: function (obj) {
if (obj.Tag == 1) {
ys.msgSuccess(obj.Message);
searchGrid();
}
else {
ys.msgError(obj.Message);
}
}
});
});
}
}
function showSaveDetailForm(bAdd) {
if (curContractId == '0') {
ys.msgError('Please select a contract first!');
return false;
}
var id = 0;
if (!bAdd) {
var selectedRow = $('#gridTable1').bootstrapTable('getSelections');
if (!ys.checkRowEdit(selectedRow)) {
return;
}
else {
id = selectedRow[0].Id;
}
}
ys.openDialog({
title: id > 0 ? 'Edit' : 'Add',
content: '@Url.Content("~/ContractManage/SealsManagementDetail/SealsManagementDetailForm")' + '?id=' + id + ' & amp;ContractId=' + curContractId,
width: '50%',
height: '30%',
callback: function (index, layero) {
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.saveForm(index);
}
});
}
function deleteDetailForm() {
var selectedRow = $('#gridTable1').bootstrapTable('getSelections');
if (ys.checkRowDelete(selectedRow)) {
ys.confirm('Are you sure you want to delete the selected' + selectedRow.length + 'piece of data?', function () {
var ids = ys.getIds(selectedRow);
ys.ajax({
url: '@Url.Content("~/ContractManage/SealsManagementDetail/DeleteFormJson")' + '?ids=' + ids,
type: 'post',
success: function (obj) {
if (obj.Tag == 1) {
ys.msgSuccess(obj.Message);
searchGrid();
}
else {
ys.msgError(obj.Message);
}
}
});
});
}
}
//Details
function detail(id) {
ys.openDialog({
title: 'View details',
content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementForm")' + '?id=' + id + ' &sType=1',
width: '968px',
height: '750px',
callback: function (index, layero) {
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.saveForm(index);
}
});
}
//Audit
function SubVaild(id) {
ys.openDialog({
title: 'Audit',
content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementVaild")' + '?id=' + id,
width: '668px',
height: '450px',
callback: function (index, layero) {
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.saveForm(index);
}
});
}
//Contract archive file
function address(id) {
ys.openDialog({
title: 'Upload contract archive',
content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementContract")' + '?id=' + id,
width: '768px',
height: '450px',
callback: function (index, layero) {
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.saveForm(index);
}
});
}
</script>