JQuery.BootGrid 数据类型和数据格式化程序

Question

JQuery.BootGrid 可以使用哪些数据类型和数据格式化程序？或者数据类型和数据格式字段实际上是 JQuery 数据类型还是其他一些属性？如果是这样，JQuery 数据类型是什么？（我找不到相关文档）

我想将一列设置为货币（左边有一个美元符号），如何使用 JQuery.BootGrid 来实现？

但我想大致了解 data-type/data-formatter。我是否必须为此了解 jqGrid 格式化程序，或者 bootGrid 是完全不同的产品？

Answer 1

Bootgrid 数据类型：

事实证明 data-type="numeric" 是唯一受支持的类型：

从 results on a search on the bootgrid github 我了解到只支持一种显式类型：numeric，其他都是 javascript 字符串。

数字数据类型与内部 "numeric" 转换器一起使用 - 与字符串之间的转换。

（在问题中我的意思是JQuery数据类型defined here (click on this)，但正如我刚才所说，这些与Bootgrid无关）

使用 Bootgrid 格式化程序

我知道格式化程序只是使用 "this" 和网格对象的任何 html（see here in the Bootgrid docs 然后向下滚动到 "Formatters"）。

所以你可以这样写代码：

// ... in continuation to the .bootgrid
$("#grid").bootgrid({
    formatters: {
        dollarformatter: function (column, row){
            // "this" - is mapped to the grid instance
            return '$ ' + this.rows[row][column]; 
        },
        myformatter: function (column, row)
        {
            // "this" - is mapped to the grid instance
            // text - here is defined by the next column's content
            return '<button id=\"mybutton' + row + '\"'
                   + ' type=\"button\"'
                   + ' class=\"btn btn-primary\"'
                   + ' onclick=\"mybuttonclicked(' + row + ')\"'
                   + '>'
                   + this.rows[row][column + 1]
                   + '</button>';
        }
    }
});

我不是前端 javascript 专家，所以如果有更清晰的方法来编写那些没有所有转义的代码行，请在这里告诉我。

谢谢。

Answer 2

实际上我在过去 8 个月里一直在使用 jquery bootgrid 并使用其格式化程序功能重新格式化任何列。

在js文件中：

$("#grid").bootgrid({
  money: function(column, row) {
    return '$ '+row[column.id];
  },
  priceFormat: function(column, row) {
    return '<span class="price-format">'+row[column.id]+'</span>';
  }
});

中html:

<thead>
  <tr>
    <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
    <th data-column-id="nama">Nama</th>
    <th data-column-id="merk">Merk</th>
    <th data-column-id="harga_limit" data-formatter="money">Harga Limit</th>
    <th data-column-id="harga_satuan" data-formatter="money">Harga Satuan</th>
    <th data-column-id="harga_total" data-formatter="priceFormat">Total</th>
  <tr>
</thead>

JQuery.BootGrid 数据类型和数据格式化程序

JQuery.BootGrid data types and data formatters

jquery

jqgrid-formatter

jquery-bootgrid