一个页面有多个datagrid如何封装复用？

一个页面有多个DataGrid如何复用？

介绍指南

• 封装DataGrid
• 使用radio禁用启用
• 页面其他地方使用vue v-model数据绑定（ 获取单选按钮时，在updated钩子遍历）生命周期执行关系
• html代码

项目需求：

• 1.没有数据，默认.单选框状态选 “无” 并且 禁用DataGrid中（添加、删除）按钮
• 2.有数据时，单选框状态选中 " 有" 且 DataGrid中（添加、删除）为启用
• 3.点击 “无” 状态时，禁用 + - 按钮，否则启用

效果图1：没有数据

效果图2: 有数据

1. 封装DataGrid

/**********************DataGrid封装   start************************/
var editIndex = undefined;

// 编辑方法
function endEditing($el) {

	if (editIndex == undefined) {
		return true
	}

	if ($el.datagrid('validateRow', editIndex)) {
		$el.datagrid('endEdit', editIndex);
		editIndex = undefined;
		return true;
	} else {
		return false;
	}
}



// 点击选中行
function onClickRow(index) {
	if (editIndex != index) {
		if (endEditing($(this))) {
			$(this).datagrid('selectRow', index)
				.datagrid('beginEdit', index);
			editIndex = index;
		} else {
			$(this).datagrid('selectRow', editIndex);
		}
	}
}


// 添加方法
function append(el) {
	// 获取当前操作DateGrid的id
	var $idEl = $(el).parents(".datagrid-wrap").find(".easyui-datagrid")

	if (endEditing($idEl)) {
		$idEl.datagrid('appendRow', {
		// 这里是我页面字段名称（可忽略）
			disease_name: "感冒", // 给定默认值
			disease_remark: "",
			diagnosis_date: "",
			create_time: ""

		});
		editIndex = $idEl.datagrid('getRows').length - 1;
		$idEl.datagrid('selectRow', editIndex)
			.datagrid('beginEdit', editIndex);
	}
}



// 删除方法
function removeit(el) {
	var $idEl = $(el).parents(".datagrid-wrap").find(".easyui-datagrid")
	if (editIndex == undefined) {
		return
	}
	$idEl.datagrid('cancelEdit', editIndex)
		.datagrid('deleteRow', editIndex);
	editIndex = undefined;
}

2. 结合radio禁用启用 DataGrid 删除&添加按钮

	/**************禁用 启用（在vue 钩子中遍历 获取 无的 单选框）**************/
	$(function () {
		//    获取所有  无 的单选框
		var $radios = $('.radioSpan');
		var $btns = $('.addAndRemoveBtn');


		//页面加载 遍历所有 "无的" 单选框
		$radios.each(function () {
			if ($(this).prop("checked")) {
				var index = $(this).parents('.table-box').index();
				// 当点击  “无”  DataGrid 下的 + - 按钮 禁用
				$btns.eq(index).children('.adds,.dels').linkbutton('disable');

			}
		})

		// 给 无 注册单击事件
		$radios.on('click', function () {
			// 获取li的 index下标
			var index = $(this).parents('.table-box').index();
			// 当点击  “无”  DataGrid 下的 + - 按钮 禁用
	$btns.eq(index).children('.adds,.dels').linkbutton('disable');

		});
		// 遍历所有  “有的”  单选框
		var $has = $('.has');
		$has.on('click', function () {
			// 获取 当前 li标签
			var index = $(this).parents(".table-box").index();
			// 当点击  “有”  DataGrid 下的 + - 按钮 启用
			$btns.eq(index).children('.adds,.dels').linkbutton('enable');
		})
	})

3. vue 遍历 "无"数据 状态 控制 DataGrid + - 按钮

var app = new Vue({
el: '#app',
data: data,

/*************vue  updated生命周期钩子  中  获取所有  无 的单选框******************/
updated: function () {
	//    获取所有  无 的单选框
	var $radios = $('.radioSpan');
	var $btns = $('.addAndRemoveBtn');

	// 遍历所有 "无的" 单选框
	$radios.each(function () {
		// 判断 选中的 按钮
		if ($(this).prop("checked")) {
			// 获取li的 index下标
			var index = $(this).parents('.table-box').index();
			console.log(index);
			// 当点击  “无”  DataGrid 下的 + - 按钮 禁用
			$btns.eq(index).children('.adds,.dels').linkbutton('disable');
		} else {
			var index = $(this).parents('.table-box').index();
			console.log(index);
			// 当点击  “有”  DataGrid 下的 + - 按钮 启用
			$btns.eq(index).children('.adds,.dels').linkbutton('enable');
		}
	})
}

4. html

<!-- 疾病 -->
<div class="one table-box">
	<ul class="radioChoose">
		<li>
			<span class="input-radio">
				<input type="radio" class="radioSpan" value="1" name="groupdisease" v-model="is_disease">
				<span>无</span>
			</span>
			<span class="input-radio">
						<input type="radio" class="has" value="2" name="groupdisease" v-model="is_disease">
						<span>有疾病</span>
			</span>
		</li>
	</ul>
	<table id="oneDG" class="easyui-datagrid" style="width:98%;height:auto" data-options="
						iconCls: 'icon-edit',
						singleSelect: true,
						toolbar: '#oneRow',
			  
						onClickRow: onClickRow
					">
		<thead>
			<tr>
				<th data-options="field:'disease_name',width:350,align:'center',editor:'textbox'">疾病名称</th>
				<th data-options="field:'disease_remark',width:250,align:'center',editor:'textbox'">备注</th>
				<th data-options="field:'diagnosis_date',width:142,align:'center',editor:{
						type:'datebox',
						options:{
							required:true,
							editable:false
						}

					}">确诊日期</th>
			</tr>
		</thead>
	</table>

	// 添加，删除调用方法  把 当前 this 进行传参
	<div id="oneRow" style="height:auto" class="addAndRemoveBtn">
		<a href="javascript:void(0)" class="easyui-linkbutton adds" data-options="iconCls:'icon-add',plain:true" onclick="append(this)">添加</a>
		<a href="javascript:void(0)" class="easyui-linkbutton dels" data-options="iconCls:'icon-remove',plain:true" onclick="removeit(this)">删除</a>
	</div>
</div>