前端問題雜記

1、dataGrid高度問題

關鍵字：JavaScript、EasyUI、dataGrid

源碼：

{
                // 材料選擇
                $('#tt-material-select').datagrid({
                    method:'get',
                    url:$CONFIG.base_url+'/api/turnover/check/select?dataSource=調撥',
                    rownumbers:true,
                    singleSelect:true,
                    pagination:true,
                    pageSize:50,
                    height:350,
                    emptyMsg:"<div style='text-align: left;padding-left: 30px'>無數據顯示</div>",
                    columns:[[
                        {field:'no',title:'交接單號',width:'18%',align:'left'},
                        {field:'attribute',title:'調入/調出',width:'10%',align:'left'},
                        {field:'category',title:'入庫形式',width:'10%',align:'left'},
                        {field:'turnoutName',title:'調出單位',width:'15%',align:'left'},
                        {field:'turninName',title:'調入單位',width:'15%',align:'left'},
                        {field:'pics',title:'附件',width:'10%',align:'left',
                            formatter:function (value, row, index) {
                                return value?util.showPics(value):''
                            }
                        },
                        {field:'createdByName',title:'創建人',width:'10%',align:'left'},
                        {field:'createdDate',title:'創建日期',width:'10%',align:'left'}
                    ]],
                    view: detailview,
                    detailFormatter:function(index,row){
                        return '<div style="padding:2px;position:relative;"><table id="tt-material-select-son-'+index+'"></table></div>';
                    },
                    onExpandRow: function(index,row){
                        $('#tt-material-select-son-'+index).datagrid({
                            singleSelect:true,
                            rownumbers:true,
                            loadMsg:'',
                            data:row.details,
                            height:100,
                            emptyMsg:"<div style='text-align: left;padding-left: 30px'>無數據顯示</div>",
                            columns:[[
                                {field:'materialDetailName',title:'週轉材料名稱',width:'15%',align:'left'},
                                {field:'type',title:'規格型號',width:'10%',align:'left'},
                                {field:'unit',title:'單位',width:'8%',align:'left'},
                                {field:'uncheckedNum',title:'未點數量',width:'15%',align:'left',
                                    formatter:function (value, row, index) {
                                        return value?value:0;
                                    }
                                },
                                {field:'convertWeight',title:'換算重量(噸)',width:'8%',align:'left',
                                    formatter:function (value, row, index) {
                                        return value?util.toFixed2(value,2):0.00;
                                    }
                                },
                                {field:'purchasePrice',title:'原本採購單價',width:'8%',align:'left',
                                    formatter:function (value, row, index) {
                                        return value?util.toFixed2(value,2):0.00;
                                    }
                                },
                                {field:'purchaseFee',title:'原採購金額',width:'8%',align:'left',
                                    formatter:function (value, row, index) {
                                        return value?util.toFixed2(value,2):0.00;
                                    }
                                },
                                {field:'transferRate',title:'轉帳比例',width:'8%',align:'left',
                                    formatter:function (value, row, index) {
                                        return value?util.toFixed2(value,2):0.00;
                                    }
                                },
                                {field:'transferPrice',title:'轉帳單價',width:'8%',align:'left',
                                    formatter:function (value, row, index) {
                                        return value?util.toFixed2(value,2):0.00;
                                    }
                                },
                                {field:'transferFee',title:'轉帳金額',width:'8%',align:'left',
                                    formatter:function (value, row, index) {
                                        return value?util.toFixed2(value,2):0.00;
                                    }
                                },
                                {field:'warehouseName',title:'存放倉庫',width:'8%',align:'center'},
                                {field:'remarks',title:'備註',width:'25%',align:'left'}
                            ]],
                            onResize:function(){
                                $('#tt-material-select').datagrid('fixDetailRowHeight',index);
                            },
                            onLoadSuccess:function(){
                                setTimeout(function(){
                                    $('#tt-material-select').datagrid('fixDetailRowHeight',index);
                                },0);
                            }
                        });
                        $('#tt-material-select').datagrid('fixDetailRowHeight',index);
                    },
                });
            }

問題：出在指定了展開後的顯示高度，即在onExpandRow:function()設置了height:100。
解決辦法：不設置height高度即可（刪除該行即可）

2、tree節點遞歸問題

關鍵字：JavaScript、EasyUI、tree

• 父節點下有子節點時顯示正常
  
• 父節點下無子節點則出現遞歸
  
  源碼：

```javascript
 // 左側工程樹
    $('#project-tree').tree({
        url:$CONFIG.base_url+'/api/project/tree?grade=10',
        method:'get',
        lines:true,
        onBeforeExpand:function (node,params) {
            // 這個操作導致新增第4,5級工號保存成功刷新左側工程樹時有問題，去掉
            // $("#project-tree").tree('options').url = $CONFIG.base_url + '/api/project/child?pid='+node.code;
        },
        onClick:function (node) {
            $('#tt-detail').datagrid('reload',{code:node.code});
            $('#parent-code').textbox('setValue',node.code);
        },
        onLoadSuccess:function (node,data) {
            if(data.length != 0){hasData = true}
            // 上級施工部位
            $('#form-parent-tree').combotree({
                lines:true,
                data:data,
                panelWidth:'15%',
                icons:[{
                    iconCls:'fa-icon fa fa-remove',
                    handler:function (e) {
                        $(e.data.target).combotree('clear');
                        $(this).css('visibility','hidden');
                        $('#parent-code').textbox('clear');
                    }
                }],
                onBeforeExpand:function (node,params) {
                    $("#form-parent-tree").combotree('tree').tree('options').url = $CONFIG.base_url + '/api/project/child?pid='+node.code;
                },
                onSelect:function (node) {
                    $('#form-parent-tree').textbox('getIcon',0).css({'visibility':'visible','line-height':'28px'});
                    $('#parent-code').textbox('setValue',node.code);

                    //編碼自動生成
                    $.get($CONFIG.base_url+'/api/project/serial',{parentCode:node.code}).done(function (data) {
                        $('#project-code').textbox('setValue',data.no);
                    });
                }
            });

            // 消耗方式工程樹
            $('#consume-tree').tree({
                method:'get',
                checkbox:true,
                lines:true,
                data:data
            });
        }
    });

加載的json:

問題： 源碼本身沒有問題，問題出在返回的json數據上。如果父節點（也有可能是最後一個節點）的state爲closed時，點擊節點會無線循環
解決方法： 把末節點State狀態設爲open可正常顯示

參考： easyui tree樹組件無限循環