我想将一个网格中的现有数据字段组合到网格中以进入字段和可见列。 但是我需要一个数据源来比较第一个网格，当我选择使用Advantage Database Server的数据字段出现在第一个网格CUSTUMERS，Brand和INV Number中时，第二个网格中的数据字段是剩下该日期，期间等的数据字段。
如何添加if以将其与DataGrid进行比较可以根据所选列进行选择。 ？
谢谢。关心Oki Saputra
<script>
function getData() {
return $.ajax({
url: '@Url.Action("DoCollectDataMaster/Home")',
dataType: "json"
});
}
getData().done(function (data) { dataDetail = data; Execute(data); });
var groupCellTemplate = function (groupCell, info) {
$('<div>').html(info.text).css('font-style', '').appendTo(groupCell);
};
var headerCellTemplate = function (headCell, info) {
$('<div>').html(info.column.caption).css('text-align', 'center').appendTo(headCell);
};
function getGroupedColumnCount() {
var gridInstance = $("#gridContainer").dxDataGrid('instance');
var colCount = gridInstance.columnCount();
var groupColCount = 0;
for (var i = 0; i < colCount; i++)
groupColCount += (gridInstance.columnOption(i, 'groupIndex') !== undefined ? 1 : 0);
return groupColCount;
}
function Execute(gridDataSource) {
var hasCreated = false;
var theGrid = $("#gridContainer").dxDataGrid({
dataSource: gridDataSource,
columnFixing: {
enabled: false
},
grouping: {
autoExpandAll: false
},
columnAutoWidth: true,
height:'40%',
onContentReady: function (e) {
var groupCount = getGroupedColumnCount();
var gi = 0; var filter = false; var multi = false;
var btnCustom = $('<div>').dxButton({
icon: 'preferences',
onClick: function () {
PopUp.dxPopup("instance").show();
}
}).attr('title', 'Customize columns');
var btnCollapseAll = $('<div>').dxButton({
icon: 'overflow',
onClick: function () {
gi = gi - 1;
if (gi <= 0) { gi = 0; }
$("#gridContainer").dxDataGrid('instance').collapseAll(gi);
}
}).attr('title', 'Collapse All');
var btnExpandAll = $('<div>').dxButton({
icon: 'menu',
onClick: function () {
$("#gridContainer").dxDataGrid('instance').expandAll(gi);
gi = gi + 1;
if (gi >= groupCount) { gi = groupCount; }
}
}).attr('title', 'Expand All');
var btnFilter = $('<div>').dxButton({
icon: 'filter',
onClick: function () {
filter = !filter;
var dataGrid = $('#gridContainer').dxDataGrid({ filterRow: { visible: filter } });
}
}).attr('title', 'Filter');
var btnMulti = $('<div>').dxButton({
icon: 'check',
onClick: function () {
multi = !multi;
if (multi) {
var dataGrid = $('#gridContainer').dxDataGrid({ selection: { mode: 'multiple' } });
} else {
var dataGrid = $('#gridContainer').dxDataGrid({ selection: { mode: 'single' } });
}
}
}).attr('title', 'Multiple selection');
if (!hasCreated) { btnCustom.appendTo('.dx-datagrid-header-panel'); btnExpandAll.appendTo('.dx-datagrid-header-panel'); btnCollapseAll.appendTo('.dx-datagrid-header-panel'); btnFilter.appendTo('.dx-datagrid-header-panel'); btnMulti.appendTo('.dx-datagrid-header-panel'); hasCreated = true; }
},
columnChooser: {
enabled: true,
height: 180,
width: 400,
emptyPanelText: 'A place to hide the columns'
},
allowColumnResizing: true,
onRowPrepared: function (e) {
if (e.rowType == 'data') {
e.rowElement.addClass('rowatas');
} if (e.rowType == 'header') {
e.rowElement.addClass('rowbawah');
}
},
customizeColumns: function (columns) {
$.each(columns, function (_, element) {
element.groupCellTemplate = groupCellTemplate;
element.headerCellTemplate = headerCellTemplate;
});
},
showColumnLines: true,
showRowLines: true,
rowAlternationEnabled: true,
showBorders: true,
columns: [
{ dataField: 'customernm', caption: 'CUSTOMERS' },
{ dataField: 'brandnm', caption: 'BRAND' },
{ dataField: 'evdno', caption: 'INV NUMBER' },
{ dataField: 'date', caption: 'DATE', dataType: 'date', format: 'dd/MM/yyyy' },
{ dataField: 'period', caption: 'PERIOD', dataType: 'date', format: 'dd/MM/yyyy' },
{ dataField: 'received', caption: 'RECIEVED', dataType: 'date', format: 'dd/MM/yyyy' },
{ dataField: 'duedate', caption: 'DUEDATE', dataType: 'date', format: 'dd/MM/yyyy' },
{ dataField: 'yourreff', caption: 'YOURREFF', },
{ dataField: 'ourreff', caption: 'OURREFF' },
{ dataField: 'nett', caption: 'NETT', format: "fixedPoint", },
{ dataField: 'fee', caption: 'FEE', format: "fixedPoint", },
{ dataField: 'vat', caption: 'VAT', format: "fixedPoint", },
{ dataField: 'adtax', caption: 'ADTAX', format: "fixedPoint", },
{ dataField: 'others', caption: 'OTHERS', format: "fixedPoint", },
{ dataField: 'amount', caption: 'AMOUNT', format: "fixedPoint" },
],
"export": {
enabled: true,
fileName: "RP_15",
exclude: "<link rel='stylesheet' type='text/css' href='/Content/oki.css' />"
},
paging: {
pageSize: 10
},
sorting: {
mode: "multiple"
},
filterRow: {
visible: true
},
groupPanel:{
visible:true
},
searchPanel: {
visible: true,
placeholder: "Search"
},
});
var source = [];
var gridCols = theGrid.dxDataGrid("instance");
for (i = 0; i <= gridCols.columnCount() - 1; i++) {
source.push({ "field": gridCols.columnOption(i).dataField, "caption": gridCols.columnOption(i).caption, "width": gridCols.columnOption(i).width, "visible": gridCols.columnOption(i).visible, "filter": false });
};
var dxCols = $("#gridCols").dxDataGrid({
dataSource: source,
editing: { mode:'cell', allowUpdating: true },
columns: [{ dataField: "field", caption: "Field", visible: false, allowEditing: false },
{ dataField: "caption", caption: "Columns", allowEditing: false },
{ dataField: "visible", caption: "Visible", width: 80, dataType: "boolean" },
],
selection: { mode: 'single' },
columnAutoWidth: true,
scrolling: { mode: "virtual" },
paging: { pageSize: 5 },
onSelectionChanged: function (selItems) { var data = selItems.currentSelectedRowKeys[0]; alert(data); },
onCellClick: function (clickedCell) {
if (clickedCell.column.dataField == "visible") {
var gc1 = $("#gridContainer").dxDataGrid("instance");
var gc2 = $("#gridCols").dxDataGrid("instance");
gc1.columnOption(gc2.cellValue(clickedCell.rowIndex, "field"), "visible", clickedCell.value);
//alert(clickedCell.rowIndex);
//alert(gc2.cellValue(clickedCell.rowIndex, "field"));
//alert(clickedCell.value);
}
},
onRowClick: function () { alert("rowclicked");},
customizeColumns: function (columns) {
$.each(columns, function (_, element) {
element.headerCellTemplate = headerCellTemplate;
});
}
});
var sourceAV = [];
var gridAvail = theGrid.dxDataGrid("instance");
for (i = 0; i <= gridAvail.columnCount() - 1; i++) {
sourceAV.push({ "field": gridAvail.columnOption(i).dataField, "caption": gridAvail.columnOption(i).caption, "width": gridAvail.columnOption(i).width, "visible": gridAvail.columnOption(i).visible, "filter": false });
};
var dxAvail = $("#gridAvail").dxDataGrid({
dataSource: sourceAV,
editing: { mode: 'cell', allowUpdating: true },
columns: [{ dataField: "field", caption: "Field", visible: false, allowEditing: false },
{ dataField: "caption", caption: "Columns", allowEditing: false },
{ dataField: "visible", caption: "Visible", width: 80, dataType: "boolean" },
],
selection: { mode: 'single' },
columnAutoWidth: true,
scrolling: { mode: "virtual" },
paging: { pageSize: 5 },
onSelectionChanged: function (selItems) { var data = selItems.currentSelectedRowKeys[0]; alert(data); },
onCellClick: function (clickedCell) {
if (clickedCell.column.dataField == "visible") {
var gc1 = $("#gridContainer").dxDataGrid("instance");
var gc2 = $("#gridAvail").dxDataGrid("instance");
gc1.columnOption(gc2.cellValue(clickedCell.rowIndex, "field"), "visible", clickedCell.value);
//alert(clickedCell.rowIndex);
//alert(gc2.cellValue(clickedCell.rowIndex, "field"));
//alert(clickedCell.value);
}
},
onRowClick: function () { alert("rowclicked"); },
customizeColumns: function (columns) {
$.each(columns, function (_, element) {
element.headerCellTemplate = headerCellTemplate;
});
}
});
//
var panelItems = [{ title: "Column", itemTitleTemplate: "X1", contentTemplate: $("#gridCols") },
{ title: "Available", itemTitleTemplate: "X2", contentTemplate: $("#gridAvail") }];
var tabCreated = null;
var PopUp = $("#customizecolumn").dxPopup({
width: 300,
height: 300,
showTitle: true,
title: "Customize column",
visible: false,
dragEnabled: true,
closeOnOutsideClick: false,
onShowing: function () {
if (!tabCreated) {
tabCreated = $("#customtab").dxTabPanel({
items: panelItems,
itemTemplate: function (item) { return item.contentTemplate },
selectedIndex: 0,
swipeEnabled: true,
loop: true,
animationEnabled: true
//visible: false
}).dxTabPanel("instance");
}
//tabCreated.repaint();
}
});
}
</script><div id="customizecolumn">
<div id="customtab">
<div id="gridCols" style="height: 200px; width: 100%"></div>
<div id="gridAvail" style="height: 200px; width: 100%"></div>
</div>
</div>
<div id="gridContainer" style="height: 700px; width: 100%"></div>