datagrid groupview分组新增单选按钮

最新推荐文章于 2017-06-15 14:30:37 发布

tjfzt091690

最新推荐文章于 2017-06-15 14:30:37 发布

阅读量980

点赞数

分类专栏：前端文章标签： groupview easyui

本文链接：https://blog.csdn.net/qq_20171673/article/details/72763765

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在EasyUI的Datagrid GroupView中实现分组时添加单选按钮，通过修改datagrid-groupview.js文件来达到功能增强的效果。

摘要由CSDN通过智能技术生成

对datagrid-groupview.js进行如下修改

if ((frozen && hasFrozen) || (!frozen)){
			table.push('<span class="datagrid-group-title">');
			table.push('<input type="radio" name="" value="" />');
			table.push(opts.groupFormatter.call(target, group.value, group.rows));
			table.push('</span>');
		}

这里，新增了input radio。

按钮举例（修改按钮）：

	//点击修改
	$("#editmap").click(function(){
		neworedit_indusmap='edit';
		var rowSel=$(".datagrid-group-title input[type='radio']:checked");
		if(!rowSel.length){
			alert("请选择一个用户");
			return;
		}
		var useridele=rowSel.parent().parent().next().children(":first").children("tr:first").children("td").eq(1).text();
		$("#dlg_indusmap_edit").dialog('open').dialog('center').dialog('setTitle','修改');
		$('#dlg_fm_edit').form('clear');
		$('#dlg_indusmap_userid').combobox({
			    data:[{userid:useridele}],
			    url:null,
                valueField:'userid',
                textField:'userid'
		});
		$('#dlg_indusmap_userid').combobox('setValue',useridele);
		$("#dg_indus_selected").datagrid({
			url:'<%=path%>/***.do',
			method:'get',
			rownumbers:true,
			columns: [[
		        { field: 'ck_indus_selected', checkbox:true},
		        { field: 'checkedcol', title: '前次选中', width:50 , align:'left'},
		        { field: 'indusid', title: '主键',hidden:true , align:'left'},
		        { field: 'indusname', title: '行业名称',width:200, align:'left'}
		    ]],
			singleSelect:false,
			queryParams:{operationtype:'update',useridpara:useridele}
		});
	});
	//点击保存
	$("#dlg-userindusmap_buttons_edit_save").click(function(){
		var urlneworedit_indusmap='<%=path%>/***.do';
		var checkedItems=$("#dg_indus_selected").datagrid('getChecked');
		var checkedItemsList=[];
		$.each(checkedItems,function(index,ele){
			checkedItemsList.push(ele.indusid);
		});
		$("#dlg_indusmap_fm_edit").form('submit',{
				url:urlneworedit_indusmap,
				onSubmit: function(){
                    return $(this).form('validate');
                },
                queryParams:{operationtype:neworedit_indusmap,allChecked:checkedItemsList.join(',')},
                success:function(result){
                	if(result!='success'){
                		$.messager.show({title:'报错',msg:result});
                	}else{
                		$("#dlg_indusmap_edit").dialog("close");
                		$("#dg_all_map").datagrid('reload');
                	}
                }
		});
	});

在弹出框的多选中，easyui这边有个bug。checkbox多选可以正确根据上一次的记录进行初始化（但是是对input的checked属性更改），但是easyui里面的实际记录的多选是一个class checked，这个才会提交到后台。这样看到的勾选情况和提交到后台的多选情况不一致，所以我不得不多加一列“前次选中”表示上一次选中的多选情况。