javascript - 带数据源的 W2UI 网格内联编辑

Question

我正在使用 w2ui Grid 的 1.4.1 版本。我正在尝试做 inline edit同时使用 urls property 从服务器加载数据。

$(function () {
    $('#grid').w2grid({ 
        name: 'grid',
        // begin block that causes grid to be uneditable 
        // url: {
        //    get    : '<?php echo site_url('sections')?>/all',
        //    save   : '<?php echo site_url('sections')?>/save'
        // },
        // end block that causes grid to be eneditable
        show: { 
            toolbar: true,
            footer: true,
            toolbarSave: true,
            toolbarEdit: true
        },
        columns: [  
                  { 
                      field: 'code', 
                      caption: 'Code', 
                      size: '120px', 
                      sortable: true, 
                      resizable: true, 
                      editable: { 
                          type: 'text' 
                      }
                  }
                   ],
         // this records array can be removed once the urls are added back
         records: [
             { recid: 1, code: '100' }
         ]

    });    
});

如果我取消注释“url” block ，则双击时网格上的“代码”字段将不再可编辑。如果我删除它，它就是。有没有人有一个从服务器动态加载数据同时还允许内联编辑的工作示例？

回答 如下所述，我的返回结构不正确。我正在使用CodeIgniter (CI) 在后端，我的 Controller 方法如下所示:

public function all() {
    $data = $this->myModel->findAll ();
    $gridData = new W2GridData ( $data );
    echo $gridData->toJson();  //important to put "echo" here and not "return"
}

我的模型类中的 findAll() 方法是:

    function findAll() {
        $query = $this->db->get ( TABLE_NAME );
        return $query->result ();
    }

我用于包装 CI 数据库结果的实用程序类现在是:

<?php
class W2GridData {
    var $total = "-1";
    var $records = "-1";
    function __construct($items) {
        $this->records = $items;
        $this->total = count ( $this->records );
    }
    function toJson() {
        $strValue = json_encode ( $this );
        return str_replace ( "\"id\":", "\"recid\":", $strValue );  // this line was missing
    }
}

如您所见，我直接从数据库返回“id”，而不是将其转换为 w2ui 首选的“recid”，因此网格无法正确渲染。

Answer 1

我按照原样使用了您的代码，取消了网址注释并删除了记录。另外，我将其链接到静态 JSON 文件(如果将其链接到返回 JSON 的 php，应该没有什么不同)。然而，从服务器填充网格后，内联编辑工作得很好。我用的是1.4.1版本。我最好的猜测是(1)控制台中出现 JavaScript 错误，或者(2)服务器没有返回正确的结构。这是我的 JSON 文件:

{
  "total": "3",
  "records": [{
     "recid": 1,
     "code": "Some"
  }, {
     "recid": 2,
     "code": "Another"
  }, {
     "recid": 3,
     "code": "More"
  }]
}