解决: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'); } } }); } }); });