Jquery, Easy-UI-Zugriff auf die Daten in den Zeilen individuell um eigene ajax-Aufrufe
In der demo-Datei datagrid2.html der jquery-easyui-1.2.6, ich bin versucht, Zugriff auf die Daten in Zeilen über javascript, so dass ich verwenden können, diese zu konstruieren, die meinen ajax-url zu speichern, UI-änderungen auf der server-Seite.
Den gesamten html-code ist wie folgt:
<!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>Lassen Sie mich wissen, weitere Klarstellungen
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin mit easyui raster. Dies ist easyui demo-grid-Beispiel-code. Hast du Daten zu grid? Was willst du? Ihre Frage ist sehr schmutzig. Bitte deutlich schreiben und ich kann dir helfen.
Erstens bin mit ı asp.net web services mit ajax und ich bin nicht mit url(saveUrl,updateUrl etc) Eigenschaften der datagrid-Komponente. Sie nicht über die Verwendung der url-Eigenschaft der datgrid. Sie können eine Funktion verwenden, wie diese;
erhalten Sie die savechanges funtion ist "parmetervalue" - parameter mit datagrid "getSelected" Methode liks diese;
und Sie können alle Werte der Zeile;
beispielsweise ---- > Reihe.ID , Zeile.Name , Zeile.Familienname etc
und schließlich können Sie aktualisieren Sie Ihre Zeile wie diese;