0

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

让我知道更多说明

4

1 回答 1

0

我正在使用easyui网格。这是easyui演示网格示例代码。你把数据放到网格上了吗？你想要什么？你的问题很肮脏。请写清楚，我可以帮助你。

首先，我正在使用带有 ajax 的 asp.net Web 服务，并且我没有使用数据网格的 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 函数的 "parmetervalue" 参数，就像这样；

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

并且您可以获得行的所有值；

例如 ---- > row.ID 、 row.Name 、 row.SurName 等

最后你可以像这样更新你的行；

savechanges(row.Name)
于 2012-07-26T19:48:10.193 回答