JQuery MagicGrid 插件 Inline编辑示列（行内编辑）

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>