MagicGrid Inline编辑示列（行内编辑），这是 MagicGrid 的一个扩展应用之一
为保持小巧灵活，没有直接写在组件中
此示例代码已于8月5日更新，添加了 MagicCombo 下拉框，并完善了数据处理逻辑
<link href="/javascript/combo/css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/js/mac/src/combo.js"></script>
<style type="text/css">
.combo .tr { display: block; }
.grid .combo .body { margin-top: 24px; }
.grid .cell { border: 1px solid #CCC; overflow: hidden; height: 20px; }
.grid .cellTf { border: none; height: 20px; width: 100%; }
.grid .cellNf { text-align: right; }
</style>
<script type="text/javascript">
$(function(){
var gd = $('.view');
var idx = 1; //index of new record
var crs = {}; //changed records
var dd = []; //data for combobox
for(var i=1;i<=5; i++)
dd.push({ code: i, name: 'Subject ' + i });
gd.onChangeValue = function(r, f, v, b){
var k = r.no, x = crs[k], o = gd.oldData[k] || {};
b = (b==undefined? (o[f]==v):b);
if(b){
if(x){
delete x[f];
if($.isEmptyObject(x))
delete crs[k];
}
}else{
crs[k] = x || {};
crs[k][f] = v;
}
}
var cols = [{
field: 'no', title : '<input type="checkbox" name="all" />', width: 20,
render: function(r, tr, vw){
var a = $('<input type="checkbox" />');
a.attr({ name: 'no', value: r.no });
return a;
}
},{
field: 'subject', title : 'Subject', width: 200,
render: function(r, tr, vw){
var f = 'subject';
if(!tr.hasClass('selected'))
return r[f].name;
var a = $('<div class="combo"></div>');
a.mac('combo', {
keyField: 'code',
displayField: 'name',
multiSelect: false,
width: 200,
cols : [{
field: 'code', width: 60
},{
field: 'name', width: 140
}],
data: dd,
onSelect: function(me, sd, fd){
var v = r[f] = fd[0] || {};
var o = gd.oldData[r.no] || {};
var b = o[f]?(o[f].code==v.code): false;
gd.onChangeValue(r, f, v, b);
me.close();
}
}).attr('name', f).select(r.subject.code);
return a;
}
},{
field: 'summary', title : 'Summary', width: 162,
render: function(r, tr, vw){
var f = 'summary';
if(!tr.hasClass('selected'))
return r[f];
var a = $('<input type="text" class="cellTf" />');
a.attr('name', f).change(function(){
var v = r[f] = a.val();
gd.onChangeValue(r, f, v);
}).val(r[f]);
return $('<div class="cell"></div>').append(a);
}
},{
field: 'debit', title : 'Debit', width: 75, sort: true,
render: function(r, tr, vw){
var f = 'debit';
if(!tr.hasClass('selected'))
return '<div class="money">$' + r[f] + '</div>';
var a = $('<input type="text" class="cellTf cellNf" />');
a.attr('name', f).change(function(){
var v = r[f] = a.val();
if (!v || isNaN(v) || v > self.pageCount){
alert('Please input a number.')
return false;
}
gd.onChangeValue(r, f, v);
}).val(r[f]);
return $('<div class="cell"></div>').append(a);
}
}];
gd.reRenderRow = function(tr){
var k = tr.attr('name');
$.each(cols, function(n, c){
if(c.render && c.field!='no'){
var td = tr.find('.td[name=' + c.field + ']');
td.empty().append(c.render(gd.data[k], tr, gd));
}
});
}
gd.mac('grid', {
key: 'no',
cols : cols,
loader: {
params: {},
autoLoad: false
},
onRowClick: function(){
var tr = $(this), sr = gd.selected;
if(tr.hasClass('selected'))
return true;
if(sr)
gd.reRenderRow(sr.removeClass('selected'));
gd.selected = tr.addClass('selected');
gd.reRenderRow(tr);
return true;
},
afterLoad: function(dd, po){
gd.oldData = mac.eval(JSON.stringify(gd.data));
}
});
gd.loadData([{
no: 1,
subject: { code: 1, name: 'Subject 1' },
summary: 'summary 1',
debit: 45.90
},{
no: 2,
subject: { code: 2, name: 'Subject 2' },
summary: 'summary 2',
debit: 18.50
}]);
gd.seek('all').click(function(){
gd.seek('no').prop('checked', $(this).prop('checked'));
});
$('.toolbar .item').click(function(){
var ec = $(this), act = ec.attr('action');
switch(act){
case 'add':
gd.addRow({ no: 'n'+idx, subject: dd[0], $summary: '', debit: 0, credit: 0 });
idx++;
break;
case 'del':
var keys = $.map(vw.find('input[name=no]:checked'), function(c){
return c.value;
});
if(keys.length<1){
var s = gd.selected;
if(s) keys.push(s.attr('name'));
}
if(keys.length<1){
alert(Msg.info.select, [ Msg.del ]);
return;
}
var pms = { keys: keys.join(',') };
mac.confirm(Msg.confirm.message, function(){
alert('Deletion is not allowed in this demo.');
// $.post('user/delete.do', pms, function(data){
// var ro = mac.eval(data);
// if(ro.success) {
// pg.refresh();
// alert(Msg.info.success, [ Msg.del ]);
// }else{
// alert(Msg.info.error, [ Msg.del, ro.data ]);
// }
// });
}, [ Msg.del ]);
break;
case 'chg':
alert(JSON.stringify(crs));
break;
}
});
});
</script>
<div class="toolbar">
<div class="item button" action="add">Add Row</div>
<div class="item button" action="del">Delete Row</div>
<div class="item button" action="chg">Show Changed Data</div>
</div>
<div class="clear"></div>
<div class="viewPort">
<div class="view grid"></div>
</div>