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 サービスを使用しており、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 関数の「parmetervalue」パラメーターを取得できます。

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

行のすべての値を取得できます。

たとえば ---- > row.ID 、 row.Name 、 row.SurName など

最後に、このように行を更新できます。

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