前端问题杂记
文章目录
- 1、dataGrid高度问题
- 2、tree节点递归问题
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:"无数据显示",
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 '+index+'">
';
},
onExpandRow: function(index,row){
$('#tt-material-select-son-'+index).datagrid({
singleSelect:true,
rownumbers:true,
loadMsg:'',
data:row.details,
height:100,
emptyMsg:"无数据显示",
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树组件无限循环