<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
var products = [
{productid:'FI-SW-01',name:'Koi'},
{productid:'K9-DL-01',name:'Dalmation'},
{productid:'RP-SN-01',name:'Rattlesnake'},
{productid:'RP-LI-02',name:'Iguana'},
{productid:'FL-DSH-01',name:'Manx'},
{productid:'FL-DLH-02',name:'Persian'},
{productid:'AV-CB-01',name:'Amazon Parrot'}
];
function productFormatter(value){
for(var i=0; i<products.length; i++){
if (products[i].productid == value) return products[i].name;
}
return value;
}
function getSum()
{
alert(33);
}
$(function () {
var lastIndex;
$('#tt').datagrid({
url: 'webjson.ashx',
title: 'Load Data ',
iconCls: 'icon-save',
singleSelect: true,
loadMsg: '數據加載中請稍后……',
width: 600,
height: 300,
columns: [[
{ field: 'itemid', title: 'Item ID', width: 80 },
{ field: 'productid', title: 'Product ID', width: 100 },
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: "numberbox" }, //增加可編輯
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: "numberbox" },//增加可編輯
{ field: 'attr1', title: 'Attribute', width: 150, editor: "numberbox" },//這里雖為編輯類型，但是已經修改源碼，成為不可以狀態
{ field: 'status', title: 'Status', width: 60, align: 'center' }
]],
pageSize: 5,
pageList:[5,10,20,30],
pagination: true,
rownumbers: true ,
toolbar:[{
text:'append',
iconCls:'icon-add',
handler:function(){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('appendRow',{
itemid:'',
productid:'',
listprice:'',
unitprice:'',
attr1:'',
status:'P'
});
var lastIndex = $('#tt').datagrid('getRows').length-1;
$('#tt').datagrid('beginEdit', lastIndex);
}
}],
onClickRow: function (rowIndex) {
if (lastIndex != rowIndex) {
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('beginEdit', rowIndex);
setEditing(rowIndex);
//$('#tt').datagrid('refreshRow',rowIndex);
}
lastIndex = rowIndex;
}
});
});
//具體實現方法
function setEditing(rowIndex) {
var editors = $('#tt').datagrid('getEditors', rowIndex);
var priceEditor = editors[0];
var amountEditor = editors[1];
var sumcount = editors[2];
sumcount.target.bind('click', function () {
var sum = priceEditor.target.val()+amountEditor.target.val();
alert(sum);
sumcount.target.val(sum);
});
}
</script>
</head>
<body>
<h1>Editable DataGrid</h1>
<table id="tt" style="width:650px;height:auto"
title="Editable DataGrid" iconCls="icon-edit" singleSelect="true">
</table>
</body>
</html>