jqGrid 行编辑(select事件)动态追加控件(操作)

jqGrid 行编辑(select事件)动态追加控件(操作)

jqGrid 行编辑(select事件)动态追加控件(操作)


在某个控件后面, 追加一个控件, 在某个控件下面设置change事件即可。
但需要注意,如果用到jqGrid的行编辑, 表单中新增的属性无法提交给后台, 想解决这个问题,需要在editGridRow的options中重新设置postdata

如下:

jqGrid表格配置
{
					name : 'attrType',
					index : 'ATTR_TYPE',
					editable:true,
					formatter: function(cellvalue, options, rowObject) {
						var attrType = "";
						if(cellvalue == "1"){
							attrType = "文本";
						}else{
							attrType = "数据字典";
						}
						return attrType;
					},
					editable:true,
					edittype:'select', 
					editoptions:{
						value:"1:文本;0:数据字典",
						dataEvents: [{type:'change',fn:function(e){
							//TODO 下拉后增加后,选择数据字典项目 
					
							$('#dataItemSpan').html('');
							var $attrTypeSel = $( e.target );
							var attrType = $attrTypeSel.val();
							if (attrType == 0) {
								$attrTypeSel.after('<span id="dataItemSpan"> 数据项:<select id="rule" class="FormElement" role="select"><option value="ttt">tt</option></select></span>');
							}
						}}]
					},
					formoptions:{colpos:1,rowpos:3,elmsuffix:'<font color="red" >*</font>'}



var editDialogOptions = {
top: $(window).height()/4,
    left: $(window).width()/3,
    addCaption: "新增属性",
    editCaption: "编辑属性",
    ......
beforeSubmit : function(postdata, formid) {
		if ($('#rule').length != 0) {
			postdata["attribute.rule"] = $('#rule').val();//Reset data of the rule.
		}
		return[true,"sucessful"];
    }
}
var rowid = jQuery("#attributeList").jqGrid("getGridParam", "selrow");//selarrrow
jQuery("#attributeList").jqGrid('editGridRow',rowid, editDialogOptions);

你可能感兴趣的:(select)