3

jquery と EasyUI を使用して、SQL データベースからテーブルを作成しています。このチュートリアルに従って、インライン編集を介して列の一部を編集可能にすることができました。可能なセル値はコンボボックスによって与えられます。updateURL 用の php ファイルがあり、既存のコンテンツの更新は正常に機能しています。

私の質問は次のとおりです。これまでのところ、セルの編集を確認するには（セルをクリックしてコンボボックスから値を選択した後）、ユーザーはテーブルの他の行をクリックして更新スクリプトをトリガーする必要があります。表に行が 1 つしかなく、編集可能な列が 1 つだけの場合、変更を確認することはできないようです (たとえば、Enter キーを押して)。

そのような確認方法はありますか？助けてくれてありがとう！

更新：ここまで来ました：データグリッドでは、コンボボックスを介して編集される列が作成されます

<th field="..." data-options="formatter:...,
editor:{type:'combobox',options:{valueField:'...',textField:'...',url:'file.php'‌​,
onSelect: function (record) {*}}}">field</th>

アスタリスク (*) の代わりにコマンドを使用して編集を保存/終了する必要があると思います。を使用endEditしsaveRowましたが、成功しませんでした。それは正しい場所です (単純なアラートでテストしました) が、正しいコマンド/構文ではありません。

4

3 に答える 3

1

解決しました！

アスタリスクを付ける必要があるコードは次のとおりです。

var selectedrow = $('#dg_id').datagrid('getSelected');
var rowIndex = $('#dg_id').datagrid('getRowIndex', selectedrow);
$('#dg_id').datagrid('endEdit',rowIndex);

これが他の人にも役立つことを願っています。

于 2013-02-27T10:40:35.027 に答える
1

ここで私のソリューションを Google に任せましょう。バージョン 1.4.4 でテスト済み

基本的にはメソッドをオーバーライドする必要がありますeditRowが、EasyUI はあまりうまく設計されていないようで、内部はまったく文書化されていません。また、隠しfocusEditor関数の呼び出しがあるため、このコードになりました。<Enter>でトリガーsaveRowされ、<Shift> + <Enter> で複数行エディターに改行を挿入できます。また、偶発的なエラーが多いため、他の行をクリックして保存をオフにしました。

$.fn.edatagrid.methods.editRow = function(jq, index){
    return jq.each(function(){
        var dg = $(this);
        var opts = $.data(this, 'edatagrid').options;
        var editIndex = opts.editIndex;
        if (editIndex != index){

            // -------------------- ✂ --------------------
            // Lost focus
            if (editIndex != -1) {
                dg.edatagrid('cancelRow');
                return;
            }
            // -------------------- ✂ --------------------

            if (dg.datagrid('validateRow', editIndex)){
                if (editIndex>=0){
                    if (opts.onBeforeSave.call(this, editIndex) == false) {
                        setTimeout(function(){
                            dg.datagrid('selectRow', editIndex);
                        },0);
                        return;
                    }
                }
                dg.datagrid('endEdit', editIndex);
                dg.datagrid('beginEdit', index);
                if (!dg.edatagrid('isEditing', index)){
                    return;
                }
                opts.editIndex = index;

                // -------------------- ✂ --------------------
                // Based on focusEditor() function
                var target;
                var that = this;
                var editor = $(this).datagrid('getEditor', {index:opts.editIndex});
                if (editor){
                    target = editor.target;
                } else {
                    var editors = $(this).datagrid('getEditors', opts.editIndex);
                    if (editors.length){
                        target = editors[0].target;
                    }
                }
                if (target){
                    var field = $(target).hasClass('textbox-f') ? $(target).textbox('textbox') : $(target);
                    field.focus();
                    field.bind('keydown', function(e) {
                        if (e.which == 13 && !event.shiftKey) {
                            $(that).edatagrid('saveRow');
                        }
                    });
                }
                // -------------------- ✂ --------------------

                var rows = dg.datagrid('getRows');
                opts.onEdit.call(this, index, rows[index]);
            } else {
                setTimeout(function(){
                    dg.datagrid('selectRow', editIndex);
                }, 0);
            }
        }
    });
};
于 2015-12-07T12:30:59.087 に答える
0

グリッドに添付されたツールバー（保存/確認ボタン付き）を使用しないのはなぜですか。ボタンをクリックすると、edatagrid の更新イベントを明示的にトリガーできます。

あなたが参照したリンクで、例を見つけることができます、

http://www.jeasyui.com/tutorial/app/crud2.php

于 2013-02-26T17:20:35.390 に答える