0

我使用 jQuery 和 Datatables 来显示大约 300 个数据库行。该表位于 jQuery UI 对话框中,并通过 AJAX 请求下载。下载后,我想在每一行上创建 jQuery UI 按钮以进行编辑和删除。这需要很长时间(在一些“弱”客户端上),而且真的很烦人。有没有办法让它更快?我试过 INPUT type="button" 有点快但很难看。有什么想法/建议吗?先感谢您!!!

编辑在这里插入按钮的最后两行是一些代码:

    $('<div id="wdw1000frm"></div>').dialog({
        parent : '#wdw1000',
        autoOpen : false,
        closeOnEscape : false,
        height : 500,
        maxHeight : 500,
        minHeight : 500,
        minWidth : 700,
        position : [479, 68],
        title : 'Arrivals',
        width : 1000
    });
    DWM.showForm("1000", "arrivals", "Arrivals", "Arrivals");
    $("#wdw1000_tbl").dataTable({
        "bJQueryUI" : true,
        "bPaginate" : false,
        "bProcessing" : true,
        "bLengthChange" : false,
        "bFilter" : true,
        "bSort" : true,
        "bInfo" : false,
        "bAutoWidth" : false,
        "sScrollY" : "300px",
        "sDom" : "<\"H\"lfr>tS<\"F\"ip>",
        "fnInitComplete" : function() {
            this.fnSettings().oScroller.fnScrollToRow(64);
        },
        "bDeferRender" : false,
        "oLanguage" : {
            "sProcessing" : "Επεξεργασία...",
            "sLengthMenu" : "Δείξε _MENU_ στοιχεία",
            "sZeroRecords" : "Δεν βρέθηκαν στοιχεία που να ταιριάζουν",
            "sInfo" : "Εμφάνηση _START_ έως _END_ από _TOTAL_ στοιχεία",
            "sInfoEmpty" : "Εμφάνηση 0 έως 0 από 0 στοιχεία",
            "sInfoFiltered" : "(εφαρμογή φίλτρου σε _MAX_ συνολικά στοιχεία)",
            "sInfoPostFix" : "",
            "sSearch" : "Αναζήτηση:",
            "oPaginate" : {
                "sFirst" : "Πρώτη",
                "sPrevious" : "Προηγούμενη",
                "sNext" : "Επόμενη",
                "sLast" : "Τελευταία"
            }
        },
        "aaData" : [['168', '00:10-1', '1339708200', 'TRA 232', 'Sundsvall', 'SDL', '', '', '', '0', '', '0', '3', 'Cancelled', 'CAN', '<div class="Edit"></div>', '<div class="Delete"></div>'], 
                    ['169', '00:45-1', '1339710300', 'AEE 261', 'Varkaus', 'VRK', '', '', '', '0', '', '0', '5', 'New Time', 'NET', '<div class="Edit"></div>', '<div class="Delete"></div>'], 
                    ['170', '01:15-1', '1339712100', 'FPO 228', 'Indianapolis', 'IND', '', '', '', '0', '', '0', '5', 'Diverted', 'DIV', '<div class="Edit"></div>', '<div class="Delete"></div>'], 
    .
    .
    .
                    ['300', '08:10+1', '1339909800', 'LT 3620', 'Sao Joao', 'QSJ', '', '', '', '0', '', '0', '3', '', '', '<div class="Edit"></div>', '<div class="Delete"></div>']],
        "aoColumns" : [{
            "bVisible" : false
        }, {
            "aDataSort" : [2, 1],
            "sClass" : "alignLeft",
            "sTitle" : "STM",
            "sWidth" : "100px"
        }, {
            "bVisible" : false
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "FN",
            "sWidth" : "100px"
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "CITY"
        }, {
            "bVisible" : false
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "VIA"
        }, {
            "bVisible" : false
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "EST",
            "sWidth" : "100px"
        }, {
            "bVisible" : false
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "ACT",
            "sWidth" : "100px"
        }, {
            "bVisible" : false
        }, {
            "sClass" : "alignCenter Editable",
            "sTitle" : "BAG",
            "sWidth" : "100px"
        }, {
            "sClass" : "alignLeft",
            "sTitle" : "REM"
        }, {
            "bVisible" : false
        }, {
            "sTitle" : "&nbsp;",
            "sWidth" : "10px",
            "bSortable" : false,
            "sClass" : "Edit"
        }, {
            "sTitle" : "&nbsp;",
            "sWidth" : "10px",
            "bSortable" : false,
            "sClass" : "Delete"
        }]
    });
    $('#wdw1000_tbl div.Edit').button ({ icons : {primary : 'ui-icon-pencil'},text : false,label : 'Edit'});
    $('#wdw1000_tbl div.Delete').button ({ icons : {primary : 'ui-icon-pencil'},text : false,label : 'ui-icon-trash'});
4

3 回答 3

4

mRender我通过使用and 解决了类似的性能问题fnRowCallback,在那里我将显示内容与排序内容分开,并返回一个空内容用于mRender函数中的显示。这大大减少了初始化时间。

fnRowCallback每当一行可见时都会被调用,所以在这里我创建了我更“复杂”的标记。在您的示例中,按钮,在我的情况下,我有 2000 行和表格内的一些链接,需要 15 秒才能显示。应用我的修复后,它减少到不到一秒。如果您对一些更详细的代码示例感兴趣,请查看我的博客文章

于 2012-10-16T22:32:52.777 回答
1

您是否考虑过使用内置此功能的数据表编辑器?

我将数据表编辑器用于一个项目,该项目完全符合您的要求(行是库存,客户希望能够添加/删除)

http://editor.datatables.net/

还有一个例子: http ://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html

于 2012-06-16T23:42:50.893 回答
1

您只能在一行捕获鼠标悬停事件时插入这些按钮,并在鼠标悬停时删除它们?然后你也可以重用 DOM 元素:)

我的 2 美分,

奥雷连

于 2012-06-16T00:06:27.593 回答