您的位置:首页 > 产品设计 > UI/UE

解决:easyui中的datagrid详情展开,combobox的级联操作,以及修复combobox总是显示value值的问题

2013-12-27 18:58 507 查看
先来看下效果



<script type="text/javascript">
var comboboxData;//项目与部门 field内的combobox data
var datagrid;
$(function() {
//输入url获得data,用于获得combobox的值
var _url='${pageContext.request.contextPath}/userController/getDepAndProByUid?userId=${sessionInfo.id}';
$.ajax({
url:_url,
type:'get',
async:false,//此处必须是同步
dataTye:'json',
success:function(data){
comboboxData=data;
}
})
datagrid=$('#Diarydg')
.datagrid(
{
view : detailview,
url : "${pageContext.request.contextPath}/diaryController/dataGrid",
toolbar : "#tool",
border : false,
pagination : true,
fitColumns : true,
singleSelect : true,
onClickRow: onClickRow,
fit : true,
columns : [ [ {
field : 'pd',
title : '项目与部门',
width : 100,
formatter:function(value,rowData,rowIndex){//此处为解决总是显示value问题的关键
for(var i=0; i<comboboxData.length; i++){
if(comboboxData[i].value==value){
return comboboxData[i].label;
}
}
return "";
},
editor:{
type:'combobox',
options:{
valueField:'value',
textField:'label',
data:comboboxData,
onSelect:function(record){//此处为级联操作的关键
var row = datagrid.datagrid("getSelections");
var rowIndex = datagrid.datagrid('getRowIndex', row[0]);
var target = datagrid.datagrid('getEditor', { 'index': rowIndex, 'field': 'content' }).target;
target.combobox('clear');
console.log(record);
var url = '${pageContext.request.contextPath}/taskController/personTasks?userId=${sessionInfo.id}&depId='+record.value;
target.combobox('reload', url);
}
}
}
}, {
field : 'content',
title : '任务描述',
width : 200,
editor:{
type:'combobox',
options:{
valueField:'value',
textField:'label',
url:'${pageContext.request.contextPath}/taskController/personTasks?userId=${sessionInfo.id}&depId='
}
}
}, {
field : 'completeness',
title : '完成度',
width : 80,
editor:'combobox'
}, {
field : 'workhours',
title : '工时',
width : 80,
editor:'combobox'
}, {
field : 'day',
title : '日期',
width : 100,
editor:'datebox'
}, {
field : 'remark',
title : '备注',
width : 150,
}]],
detailFormatter : function(rowIndex, rowData) {//此处为详情展示的关键
return '<table class="ddv"><tr>'
+ '<td style="border:0;padding:10px">'
+ '<p><img src="${pageContext.request.contextPath}/style/images/extjs_icons/award-start/award_star_bronze_1.png"/> <font color="blue">备注</font> :<span class="rem"> </apan></p>'
+ '</td>' + '</tr> </table>';
},
onExpandRow : function(index, row) {
var rem = $(this).datagrid('getRowDetail',
index).find('span.rem');
var html = '<form id="ff" action="${pageContext.request.contextPath}/diaryController/editRemark" method="post"><textarea name="remark" style="width:820px">'
+ row.remark
+ '</textarea><br><input name="id"  type="text" value="'+row.id+'" style="display:none"></input><input type="submit" title="保存"></input></form>';
rem.html(html);
$('#Diarydg').datagrid('fixDetailRowHeight',
index);
$('#ff').form(
{
success : function(data) {
var	result = $.parseJSON(data);
if (result.success) {
$.messager.alert('Info',
'添加备注成功', 'info');
$('#Diarydg').datagrid(
'collapseRow',
index);
$('#Diarydg').datagrid(
'reload');
} else {
$.messager.alert('Info',
'修改失败', 'info');
}
}
});
}
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息