FlexGrid 行内按钮绑定主键id

收藏

你好,Alice,
代码如下，看注释部分和html变量

<!DOCTYPE HTML>
<!DOCTYPE html PUBLIC "" ""><HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><META content="IE=11.0000"
http-equiv="X-UA-Compatible">
<TITLE></TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT src="CustomEditor_JS.files/jquery-1.11.1.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="CustomEditor_JS.files/wijmo.min.js" type="text/javascript"></SCRIPT>
<LINK href="CustomEditor_JS.files/wijmo.min.css" rel="stylesheet" type="text/css">
<SCRIPT src="CustomEditor_JS.files/wijmo.grid.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="CustomEditor_JS.files/wijmo.input.min.js" type="text/javascript"></SCRIPT>
<SCRIPT type="text/javascript">
var editIndex = -1;
var inputDate, acolindex;
// get matches for a search term
function getData(count, unique) {
var data = [];
var dt = new Date();
// add count items
for (var i = 0; i < count; i++) {
// constants used to create data items
var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60);
// create the item
data.push({
id: i,
date: date,
buttons: ""
});
}
return data;
}
function itemFormatter(panel, r, c, cell) {
if (panel.cellType == wijmo.grid.CellType.Cell) {
var col = panel.columns[c],
html = cell.innerHTML;
if (r == editIndex) {
switch (col.name) {
case 'buttons':
html = '<div>' +
'&nbsp;&nbsp;' +
'<button class="btn btn-primary btn-sm" onclick="commitRow(' + r + ')">' +
'<span class="glyphicon glyphicon-ok"></span> OK' +
'</button>' +
'</div>';
break;
case 'date':
acolindex = c;
html = '<input id="theDate" />';
setTimeout(function () {
$("#theDate").keydown(function (args) {
if (args.which == 9) {
// find the cell from its bounding rectangle
var rc = flex.getCellBoundingRect(r, 2);
var cell = document.elementFromPoint(rc.left + rc.width / 2, rc.top + rc.height / 2);
// make sure this is a regular cell (not a header)
if (wijmo.hasClass(cell, 'wj-header')) {
cell = null;
}
// make sure this is not an element within a cell
while (cell && !wijmo.hasClass(cell, 'wj-cell')) {
cell = cell.parentElement;
}
cell.childNodes[0].focus();
}
});
}, 20);
break;
}
} else {
switch (col.name) {
case 'buttons':
cell.style.padding = '3px';
//此处需要拿到隐藏的属性id的值
html = '<div>' +
'&nbsp;&nbsp;' +
'<button class="btn btn-default btn-sm" onclick="editRow(' + id字段的值 + ')">' +
'<span class="glyphicon glyphicon-pencil"></span> Edit' +
'</button>' +
'</div>';
break;
}
}
if (html != cell.innerHTML) {
cell.innerHTML = html;
if (col.name == "date") {
inputDate = new wijmo.input.InputDate("#theDate");
inputDate.value = new Date(panel.getCellData(r, c, true));
}
cell.style.padding = '3px';
}
}
}
function editRow(row) {
editIndex = row;
flex.invalidate();
}
function commitRow(row) {
// save changes
flex.setCellData(row, 'date', inputDate.value);
// done editing
cancelRow(row);
//Get the updated values in collection view.
var cv = flex.collectionView;
}
function cancelRow(row) {
editIndex = -1;
flex.invalidate();
}
var flex;
$(document).ready(function () {
flex = new wijmo.grid.FlexGrid("#flexgrid");
flex.initialize({
autoGenerateColumns: false,
//selectionMode: "None",
itemsSource: getData(10),
columns: [
{ header: 'ID', name: "id", binding: 'id', width: '*',visible:false },
{ header: 'Date', name: "date", binding: 'date', width: '*' },
{ header: 'Buttons', binding: "buttons", name: "buttons", width: '*' }],
isReadOnly: true,
itemFormatter: itemFormatter
});
});
</SCRIPT>
<META name="GENERATOR" content="MSHTML 11.00.9600.17416"></HEAD>
<BODY>
<DIV id="flexgrid"></DIV></BODY></HTML>

复制代码

Alice · Alice

回复 1楼yaochenglong的帖子

感谢对该问题的反馈。
您通过panel.getCellData(r, c, true)就可以拿到当前单元格的值，而通过panel.getCellData(r, "id", true),就可以拿到本行的id列的值。

yaochenglong · yaochenglong

已经拿到值了，okay了！

Alice · Alice

回复 3楼yaochenglong的帖子

好的，谢谢反馈。

您可以关注我们的微信服务号（微信号：GrapeCityDT），帖子有回复时可即时收到提醒，便于您第一时间查看，尽快解决技术问题。关注即可获得300金币用于兑换礼品。

		自动登录	找回密码
密码			立即注册

FlexGrid 行内按钮绑定主键id

3 个回复

评分

活字格认证

微信认证勋章

元老葡萄