Javascript 更新YUI数据表时避免页面闪烁

我正在使用jlinq库将linq扩展到json，因此我过滤json数据。考虑到我有一个JSON数据，它在页面加载中用100行绘制一个YUI DATABATE。我正在做一个客户端过滤器，它将减少我的json数据，现在我正在重新绘制相同的数据表。发生的事情是，它工作得很好，但有一个恼人的闪烁效果

我从过滤器文本框的onkeyup事件调用下面的方法

function showusersfilter(txt) {
    var jsondata = document.getElementById("ctl00_ContentPlaceHolder1_HfJsonString").value;
    jsondata = jQuery.parseJSON(jsondata);
    var results = jLinq.from(jsondata.Table)
                 .startsWith("name", txt)
                 .select();
    var jsfilter = { "Table": results };

    var myColumnDefs = [
         { key: "userid", label: "UserId", hidden: true },
         { key: "name", label: "Name", sortable: true, sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC} },
         { key: "designation", label: "Designation" },
         { key: "phone", label: "Phone" },
         { key: "email", label: "Email" },
         { key: "role", label: "Role", sortable: true, sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC} },
         { key: "empId", label: "EmpId" },
         { key: "reportingto", label: "Reporting To", sortable: true, sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC} },
         { key: "checkbox", label: "", formatter: "checkbox", width: 20 }
     ];
    var jsonObj = jsfilter;
    var target = "datatable";
    var hfId = "ctl00_ContentPlaceHolder1_HfId";
    generateDatatable(target, jsonObj, myColumnDefs, hfId);
}

我的文本框看起来

<asp:TextBox ID="TxtUserName" runat="server" CssClass="text_box_height_14_width_150" onkeyup="showusersfilter(this.value);"></asp:TextBox>

---

问题可能与线路有关：

myDataTable.resizeHack = function()
        { this.getTbodyEl().parentNode.style.width = "100%"; }

---

由于您正在调整表格的宽度，因此可以合理地假设需要在屏幕上重新绘制表格，从而导致闪烁。

为什么每次筛选数据时都要创建一个新的dataTable？您不需要此任务只需使用其数据源的sendRequest方法将过滤后的数据提供给其dataTable

我创建了这个jsonObject来模拟过滤后的数据

var jsonObject = {
    "root":[
        {id:"5", userid:"1", name:"ar", designation:"1programmer", phone:"15484-8547", email:"1arthurseveral@yahoo.com.br", role:"1developer", empId:"1789", reportingto:"116"},
        {id:"5", userid:"2", name:"br", designation:"2programmer", phone:"25484-8547", email:"2arthurseveral@yahoo.com.br", role:"2developer", empId:"2789", reportingto:"216"},
        {id:"5", userid:"3", name:"cr", designation:"3programmer", phone:"35484-8547", email:"3arthurseveral@yahoo.com.br", role:"3developer", empId:"3789", reportingto:"316"},
        {id:"5", userid:"4", name:"dr", designation:"4programmer", phone:"45484-8547", email:"4arthurseveral@yahoo.com.br", role:"4developer", empId:"4789", reportingto:"416"},
        {id:"5", userid:"5", name:"er", designation:"5programmer", phone:"55484-8547", email:"5arthurseveral@yahoo.com.br", role:"5developer", empId:"5789", reportingto:"516"}
    ],
    "another":[
        {id:"5", userid:"5", name:"er", designation:"5programmer", phone:"55484-8547", email:"5arthurseveral@yahoo.com.br", role:"5developer", empId:"5789", reportingto:"516"},
        {id:"5", userid:"4", name:"dr", designation:"4programmer", phone:"45484-8547", email:"4arthurseveral@yahoo.com.br", role:"4developer", empId:"4789", reportingto:"416"},
        {id:"5", userid:"3", name:"cr", designation:"3programmer", phone:"35484-8547", email:"3arthurseveral@yahoo.com.br", role:"3developer", empId:"3789", reportingto:"316"},
        {id:"5", userid:"2", name:"br", designation:"2programmer", phone:"25484-8547", email:"2arthurseveral@yahoo.com.br", role:"2developer", empId:"2789", reportingto:"216"},
        {id:"5", userid:"1", name:"ar", designation:"1programmer", phone:"15484-8547", email:"1arthurseveral@yahoo.com.br", role:"1developer", empId:"1789", reportingto:"116"}
    ]
};

初始化时

(function() {
    var Yutil      = YAHOO.util,
        Ywidget    = YAHOO.widget

        DataTable  = Ywidget.DataTable,
        Paginator  = Ywidget.Paginator,
        DataSource = Yutil.DataSource;

    YAHOO.namespace("_3657287"); // QUESTION ID - SEE URL

    var _3657287 = YAHOO._3657287;

    /**
      * paginator
      */
    var paginator = new Paginator({
        rowsPerPage:25,
        template:Paginator.TEMPLATE_ROWS_PER_PAGE,
        rowsPerPageOptions:[10, 25, 50, 100],
        pageLinks:10
    });

    /**
      * dataSource
      *
      * As you have static data, I pass an empty "jsonObject" to its constructor
      */
    var dataSource = new DataSource({root:[]});
    dataSource.responseType = DataSource.TYPE_JSON;
    dataSource.responseSchema = {resultsList:"root", fields:[]};

    var columnSettings = [
        {key:"userid", label:"UserId"},
        {key:"name", label:"Name"},
        {key:"designation", label:"Designation"},
        {key:"phone", label:"Phone"},
        {key:"email", label:"Email"},
        {key:"role", label:"Role"},
        {key:"empId", label:"EmpId"},
        {key:"reportingto", label:"Reporting To"}
    ];

    dataSource.responseSchema.fields[0] = "id";
    for (var i = 0; i < columnSettings.length; i++) {
        dataSource.responseSchema.fields[i + 1] = columnSettings[i].key;
    }

    /**
      * Notice initialLoad equal To false (I suppose your dataTable IS NOT pre-populated)
      */
    var dataTableSettings = {
        paginator:paginator,
        initialLoad:false
    };

    /**
      * dataTable
      *
      * Notice IT IS STORED in the namespace YAHOO._3657287
      */
    _3657287.dataTable = new DataTable("container", columnSettings, dataSource, dataTableSettings);
})();

你可以看到工作正常

但是如果效果再次出现（请注意，我只是使用了相关的部件，而不是特殊功能或其他东西），则可能会发生，因为

• 键控事件
• 数据表呈现

您可以按如下方式设置变量

var isProcessing = false;

YAHOO.util.Event.addListener("reload", "keyup", function(e) {
    if(isProcessing) {
        return;
    }

    isProcessing = true;

    YAHOO._3657287.dataTable.getDataSource().sendRequest(null, {
        success:function(request, response, payload) {
             // as shown above

             isProcessing = false;
        }
    });
}

---

另请参见和

如果删除该行，闪烁是否消失？它没有消失。任何其他建议。但闪烁已减少，但仍有少量闪烁正在发生。请尝试注释掉更改表格样式的其他行。generatedatable中的某个地方就是问题发生的地方。您需要一步一步地注释代码以定位源代码。

(function() {
    var Yutil      = YAHOO.util,
        Ywidget    = YAHOO.widget

        DataTable  = Ywidget.DataTable,
        Paginator  = Ywidget.Paginator,
        DataSource = Yutil.DataSource;

    YAHOO.namespace("_3657287"); // QUESTION ID - SEE URL

    var _3657287 = YAHOO._3657287;

    /**
      * paginator
      */
    var paginator = new Paginator({
        rowsPerPage:25,
        template:Paginator.TEMPLATE_ROWS_PER_PAGE,
        rowsPerPageOptions:[10, 25, 50, 100],
        pageLinks:10
    });

    /**
      * dataSource
      *
      * As you have static data, I pass an empty "jsonObject" to its constructor
      */
    var dataSource = new DataSource({root:[]});
    dataSource.responseType = DataSource.TYPE_JSON;
    dataSource.responseSchema = {resultsList:"root", fields:[]};

    var columnSettings = [
        {key:"userid", label:"UserId"},
        {key:"name", label:"Name"},
        {key:"designation", label:"Designation"},
        {key:"phone", label:"Phone"},
        {key:"email", label:"Email"},
        {key:"role", label:"Role"},
        {key:"empId", label:"EmpId"},
        {key:"reportingto", label:"Reporting To"}
    ];

    dataSource.responseSchema.fields[0] = "id";
    for (var i = 0; i < columnSettings.length; i++) {
        dataSource.responseSchema.fields[i + 1] = columnSettings[i].key;
    }

    /**
      * Notice initialLoad equal To false (I suppose your dataTable IS NOT pre-populated)
      */
    var dataTableSettings = {
        paginator:paginator,
        initialLoad:false
    };

    /**
      * dataTable
      *
      * Notice IT IS STORED in the namespace YAHOO._3657287
      */
    _3657287.dataTable = new DataTable("container", columnSettings, dataSource, dataTableSettings);
})();

var i = 0;
YAHOO.util.Event.addListener("reload", "keyup", function(e) {
    YAHOO._3657287.dataTable.getDataSource().sendRequest(null, {
        success:function(request, response, payload) {

            /**
              * initializeTable method clear any data stored by The datatable
              */
            this.initializeTable();

            if(i === 0) {
                this.getRecordSet().setRecords(jsonObject["root"], 0);

                i++;
            } else {
                this.getRecordSet().setRecords(jsonObject["another"], 0);

                i--;
            }

            this.render();
        },
        scope:YAHOO._3657287.dataTable,
        argument:null
    });
});

var isProcessing = false;

YAHOO.util.Event.addListener("reload", "keyup", function(e) {
    if(isProcessing) {
        return;
    }

    isProcessing = true;

    YAHOO._3657287.dataTable.getDataSource().sendRequest(null, {
        success:function(request, response, payload) {
             // as shown above

             isProcessing = false;
        }
    });
}