javascript - nullデータバグのある簡単なUI

Question

アプリケーションにeasyuiを使用しています。何らかの理由で空のグリッドを表示する必要があり、easyuiにnullデータを送信します。ただし、空のグリッドは表示されませんが、最初の列に並べ替え番号とボタンが表示されます。これが私のコードです：

 $('#GRID_PT_TARIFF_CONTRACT').datagrid({
                    singleSelect: true,
                    remoteSort: false,
                    fitcolumns: true,
                    columns: [[
                        { field: 'action', title: 'İşlem', width: (_width * 0.08).toString(), sortable: false, formatter: function (value, row, index) {
                          var button = "";
                          button = '<input type="button" value="Tarifeyi aç" class="BttnWindow" onclick="DESIGN.OPEN_SEGMENT_FRAME_BY_BUTTON(\'' + row.TariffId+ '\',\'' + row.TariffName + '\',\'' + row.ContractName + '\',\'' + row.Supplier + '\') "/>';
                          return button;
                        }
                        },
                        { field: 'TariffName', title: 'Taslak Tarife Tanımı', width: '100%', sortable: true },
                        { field: 'TariffStat', title: 'Taslak Tarife Durumu', width: '100%', sortable: true },
                        { field: 'Supplier', title: 'Tedarikçi', width: '100%', sortable: true },
                        { field: 'ContractName', title: 'Sözleşme Tanımı', width: '100%', sortable: true },
                        { field: 'ContractStat', title: 'Sözleşme Durumu', width: '100%', sortable: true },
                        { field: 'StartDate', title: 'Başlangıç Tarihi', width: '100%', sortable: true },
                        { field: 'EndDate', title: 'Bitiş Tarihi', width: '100%', sortable: true },
                        { field: 'NoticePeriod', title: 'İhbar Süresi', width: '100%', sortable: true, formatter: function (value, row, index) {
                            var val;
                            if (row.TariffId != null) {
                                val = value + ' Gün';
                            }
                            return val;
                        }
                        },
                        { field: 'ValidityPeriod', title: 'Geçerilik Süresi', width: '100%', sortable: true, formatter: function (value, row, index) {
                            var val;
                            if (row.TariffId != null) {
                                val = value + ' Ay';
                            }
                            return val;
                        }
                        }

                    ]],
                    onClickRow: function () {
                        var row = $('#GRID_PT_TARIFF_CONTRACT').datagrid('getSelected');
                        if (row.TariffId != null) {
                            GLOBALS.SelectedTariffId = row.TariffId.toString();
                            //DEGIGN.ROWCLICKEVENT
                        }
                    },
                    onDblClickRow: function () {
                        var row = $('#GRID_PT_TARIFF_CONTRACT').datagrid('getSelected');
                        if (row.TariffId != null) {
                            GLOBALS.SelectedTariffId = row.TariffId.toString();
                            GLOBALS.SelectedTariffName = row.TariffName.toString();
                            GLOBALS.SelectedContractName = row.ContractName.toString();
                            GLOBALS.SelectedSupplier = row.Supplier.toString();
                            DESIGN.CREATE_TARIFF_WIN(row.TariffId);
                        }
                    },
                    onLoadSuccess: function (data) {
                        var panel = $(this).closest(".datagrid");
                        var dg = $(this);
                        panel.find("div.datagrid-view2 > div.datagrid-body tr:first > td[field]").each(function (k, v) {
                            var bodyCol = $(v);
                            var field = bodyCol.attr("field");
                            var headerCol = panel.find("div.datagrid-view2 > div.datagrid-header tr:first > td[field='" + field + "']");
                            var bodyContent = bodyCol.children(":first");
                            var headerContent = headerCol.children(":first");
                            var content = null;
                            if (bodyCol.width() > headerCol.width()) {
                                content = bodyCol.children(":first");
                            } else {
                                content = headerCol.children(":first");
                            }

                            var col = dg.datagrid("getColumnOption", field);
                            col.width = content.outerWidth();
                            col.boxWidth = $.boxModel == true ? content.width() : content.outerWidth();

                            bodyContent.width(col.boxWidth);
                            headerContent.width(col.boxWidth);
                        });
                        dg.datagrid("fitColumns");
                        dg.datagrid("fixColumnSize");
                    }
                });

そしてここに画像があります：

Answer 1

このトピックはあなたを助け、それから私は拡張コードを変更しました。

var myview = $.extend({}, $.fn.datagrid.defaults.view, {
                onAfterRender: function (target) {
                    $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
                    var opts = $(target).datagrid('options');
                    var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
                    vc.children('div.datagrid-empty').remove();
                    if ($(target).datagrid('getRows').length <= 1) {
                        if ($(target).datagrid('getRows')[0].Id == null) {
                            var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
                            d.css({
                                position: 'absolute',
                                left: 0,
                                top: 25,
                                height: 25,
                                width: '100%',
                                textAlign: 'center',
                                background: 'snow'
                            });
                        }
                    }
                }
            });