【问题标题】:What's the closest jQuery approximation to YUI's DataTable?与 YUI 的 DataTable 最接近的 jQuery 近似值是什么?
【发布时间】:2009-07-24 11:45:51
【问题描述】:

我的两个最高优先级是渐进增强和内联编辑。我发现了渐进增强 (DataTables) 和内联编辑 (jqGrid),但不是两者兼而有之。对 jQuery UI 主题的支持会很好,但优先级较低。

更新:这是我想象的解决方案的一个示例:

<table summary="A table full of example tabular data">
  <caption>My Table to Progressively Enhance</caption>
  <thead>
    <tr>
      <th id="colA">Column A</th>
      <th id="colB">Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="colA">foo</td>
      <td headers="colB">bar</td>
    </tr>
    <tr>
      <td headers="colA">argle</td>
      <td headers="colB">bargle</td>
    </tr>
  </tbody>
</table>

… insert jquery datatable stuff here …

<script type="text/javascript">
    progressivelyEnhanceMyTable();
</script>

【问题讨论】:

    标签: jquery html-table yui inline-editing progressive-enhancement


    【解决方案1】:

    我认为jqGrid 会很合适。

    更新:

    您可以使用这样的代码将表格转换为 javascript 对象

    var $table = $('table'); // select your table
    var data = []; // instantiate the data array
    $('tr', $table).each(function(i, item){ // loop through the table rows
        obj = {} // create the object to append to the data array
        obj.name = $('td:eq(0)',$(this)).text().trim(); 
        obj.desc = $('td:eq(1)',$(this)).text().trim();
        data += obj; // add the object to the array
    });
    

    然后像 loading array data example 那样添加它

    for(var i=0;i<=data.length;i++) $("#datagrid").addRowData(i+1,data[i]); 
    

    【讨论】:

    • 如何从充满数据的table 创建一个 jqGrid?
    • 你是说html表还是数据库表?
    • 如果你能提供你正在使用的源代码,我可以更好地帮助你。
    • 我的意思是一个 html 表格。我想将初始响应作为语义正确的table 发送数据。然后我想用 jQuery 来修饰它并提供内联编辑功能。通读 jqGrid 文档,给我留下了明显的印象,即无法获取已经拥有所有数据的 table 标记并从中创建 jqGrid。
    • 试试我现在提供的例子。你可能想让它更健壮。像循环 来制作列,但我认为上面的代码应该有所帮助。
    【解决方案2】:

    使用最新版本的 jqGrid,我们现在得到了tableToGrid,它很好地解决了 grid-from-markup 问题。

    【讨论】:

      【解决方案3】:

      有一个名为 jquery-datatables-editable 的数据表插件,它添加了内联编辑。

      【讨论】:

        猜你喜欢
        • 2011-06-29
        • 2016-11-24
        • 2012-06-10
        • 2013-08-06
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2010-11-02
        相关资源
        最近更新 更多