2

slick.editorsでSlickGrid（2.0）dataViewを使用しています。グリッドでは、ユーザーは任意の数のセルを編集できます。これにより、基になるグリッドデータが変更され、グリッドがスクロールしたときに編集が維持されます。これはうまくいきます。ただし、ユーザーが[編集を保存]ボタンを押すまでこれらはデータベースに保存されないため、すべての編集について視覚的なフィードバックを提供したいと思います。

問題は、editorメソッドが、変更されたグリッドデータを読み戻した後にセルをリセットすることです。編集されたことを示すために、背景色の変更を維持する必要があります。誰かがこれを行うことができましたか？

関連するコード（単純な整数エディター）は次のとおりです。

function IntegerCellEditor(args) {
    var $input;
    var defaultValue;
    var scope = this;
    this.init = function() {
        $input = $("<input type=text class='edited' type=text style='font:normal 12px arial; width:95px; text-align:right; border:none;' />");
        $input.bind("keydown.nav", function(e) {
            if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                e.stopImmediatePropagation();
            }
        });
    $('#saveChanges').removeAttr("disabled");   // remove disabled attribute from "Save Changes" btn
        $input.appendTo(args.container);
        $input.focus().select();
    };
    this.destroy = function() {
        $input.remove();
    };
    this.focus = function() {
        $input.focus();
    };
    this.loadValue = function(item) {
        defaultValue = item[args.column.field];
        $input.val(defaultValue);
        $input[0].defaultValue = defaultValue;
        $input.select();
    };
    this.serializeValue = function() {
        return parseInt($input.val(),10) || 0;
    };
    this.applyValue = function(item,state) {
        item[args.column.field] = state;
    };
    this.isValueChanged = function() {
        return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
document.getElementsByClassName('ui-widget-content slick-row')[row].className += 'edited';
        };
        this.validate = function() {
            if (isNaN($input.val()))
                return {
                   valid: false,
                   msg: "Please enter a valid integer"
               };
            return {
                valid: true,
                msg: null
           };
        };
        this.init();
    }

この行は何もしません、そして私はこれをする方法を理解することができません：

document.getElementsByClassName('ui-widget-content slick-row')[row].className += 'edited';

ありがとう

4

1 に答える 1

3

私はSlickGridの専門家ではありませんが、例14を見てください。これには、役立つ同様の情報があると思います。

私のアイデアは次のようになります。

  • grid.onCellChangeイベントをサブスクライブする
  • 変更をオブジェクトに保存する
  • grid.setCellCssStyles（'highlight'、changes）を使用して、CSSまたはgrid.addCellCssStylesを更新します

それが少なくとも少し役立つことを願っています。

于 2013-01-07T23:44:34.403 に答える