在jquery-easyui-1.2.6的演示文件datagrid2.html中，我试图通过javascript访问行中的数据，以便我可以使用它来构建我的ajax url来保存服务器端的UI更改。
整个html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Editable DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.7.2.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(){
var lastIndex;
$('#tt').datagrid({
toolbar:[{
text:'Add New',
iconCls:'icon-add',
handler:function(){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('appendRow',{
itemid:'',
productid:'',
listprice:'',
unitprice:'',
attr1:'',
status:'P'
});
lastIndex = $('#tt').datagrid('getRows').length-1;
$('#tt').datagrid('selectRow', lastIndex);
$('#tt').datagrid('beginEdit', lastIndex);
}
},'-',{
text:'Delete',
iconCls:'icon-remove',
handler:function(){
var row = $('#tt').datagrid('getSelected');
if (row){
var index = $('#tt').datagrid('getRowIndex', row);
$('#tt').datagrid('deleteRow', index);
}
}
},'-',{
text:'Edit Save',
iconCls:'icon-save',
handler:function(){
$('#tt').datagrid('acceptChanges');
}
},'-',{
text:'Undo',
iconCls:'icon-undo',
handler:function(){
$('#tt').datagrid('rejectChanges');
}
},'-',{
text:'GetChanges',
iconCls:'icon-search',
handler:function(){
var rows = $('#tt').datagrid('getChanges');
alert('changed rows: ' + rows.length + ' lines');
}
}],
onBeforeLoad:function(){
$(this).datagrid('rejectChanges');
},
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('beginEdit', rowIndex);
}
lastIndex = rowIndex;
}
});
});
</script>
</head>
<body>
<h2>Editable DataGrid</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>Click the row to start editing.</div>
</div>
<table id="tt" style="width:700px;height:auto"
title="Editable DataGrid" iconCls="icon-edit" singleSelect="true"
idField="itemid" url="datagrid_data2.json">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="100" formatter="productFormatter" editor="{type:'combobox',options:{valueField:'productid',textField:'name',data:products,required:true}}">Product</th>
<th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
<th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>
<th field="attr1" width="250" editor="text">Attribute</th>
<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
</body>
</html>
让我知道更多的澄清
我正在使用easyui网格。这是easyui演示网格示例代码。你有数据到网格吗？你想要什么？你的问题很脏。请写清楚，ı可以帮助你。
首先，我正在使用带有ajax的asp.net web服务，并且我没有使用datagrid的url（saveUrl，updateUrl等）属性。你不必使用datgrid的url属性。你可以使用这样的功能;
function savechanges(parmetervalue)
{
$.ajax({
type: "POST",
url: WEBSERVISURL + "/WEB_SERVIS_METHOD_NAME",
data: "{WebServisParameterName:" + parmetervalue + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var data = eval("(" + msg.d + ")");
},
error: function (msg) {
}
});
}
你可以使用datagrid“getSelected”方法得到savechanges funtion的“parmetervalue”参数。
var row = $('#yourgrid').datagrid('getSelected ');
你可以获得行的所有值;
例如----> row.ID，row.Name，row.SurName等
最后你可以像这样更新你的行;
savechanges(row.Name)