前端问题杂记

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树组件无限循环