Jquery Easy UI access the data in the rows individually to make custom ajax calls

Question

In the demo file datagrid2.html of jquery-easyui-1.2.6, I am trying to access the data in rows through javascript so that I can use this to construct my ajax url to save UI changes on the server side.

The entire html code is as follows:

<!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>

Let me know for more clarifications

Mehmet · Answer 1 · 2012-07-27T18:50:49.427

I am using easyui grid. This is easyui demo grid example code. Did you get data to grid? What do you want? Your question is very dirty. Please write clearly and ı can help you.

Firstly ı am using asp.net web services with ajax and ı am not using url(saveUrl,updateUrl etc) porperty of datagrid. You dont have to use url property of datgrid. You can use a function like this;

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) {

                }                    
            });
        }

you can get savechanges funtion's "parmetervalue" parameter with datagrid "getSelected" method liks this;

var row = $('#yourgrid').datagrid('getSelected ');

and you can get all values of row;

for example ---- > row.ID , row.Name , row.SurName etc

and finally you can update your row like this;

savechanges(row.Name)

Yes, this is the sample code. Now the sample demo shows data in various rows, alright. Now I edit some data, so I would want to save the changed data in the server side also. For this I can make ajax calls. Now in order to form the url of an ajax I need the edited data to be sent in the url. How do I do that. I hope you understand this time. — nikhilvora, Jul 27 '12 at 05:06
@nixsix6: If you get your solution then you can mark this answer. By this way we more motivate to provide solutions. :) — Priyank, Jul 26 '14 at 05:15
Weird that I got my answer and both question and the answer are downvoted! — nikhilvora, Aug 02 '17 at 04:23

Jquery Easy UI access the data in the rows individually to make custom ajax calls

1 Answers1