一个页面有多个DataGrid如何复用?
介绍指南
- 封装DataGrid
- 使用radio禁用启用
- 页面其他地方使用vue v-model数据绑定( 获取单选按钮时,在updated钩子遍历)生命周期执行关系
- html代码
项目需求:
- 1.没有数据,默认.单选框状态选 “无” 并且 禁用DataGrid中(添加、删除)按钮
- 2.有数据时,单选框状态选中 " 有" 且 DataGrid中(添加、删除)为启用
- 3.点击 “无” 状态时,禁用 + - 按钮,否则启用
效果图1:没有数据
效果图2: 有数据
1. 封装DataGrid
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) {
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 删除&添加按钮
$(function () {
var $radios = $('.radioSpan');
var $btns = $('.addAndRemoveBtn');
$radios.each(function () {
if ($(this).prop("checked")) {
var index = $(this).parents('.table-box').index();
$btns.eq(index).children('.adds,.dels').linkbutton('disable');
}
})
$radios.on('click', function () {
var index = $(this).parents('.table-box').index();
$btns.eq(index).children('.adds,.dels').linkbutton('disable');
});
var $has = $('.has');
$has.on('click', function () {
var index = $(this).parents(".table-box").index();
$btns.eq(index).children('.adds,.dels').linkbutton('enable');
})
})
3. vue 遍历 "无"数据 状态 控制 DataGrid + - 按钮
var app = new Vue({
el: '#app',
data: data,
updated: function () {
var $radios = $('.radioSpan');
var $btns = $('.addAndRemoveBtn');
$radios.each(function () {
if ($(this).prop("checked")) {
var index = $(this).parents('.table-box').index();
console.log(index);
$btns.eq(index).children('.adds,.dels').linkbutton('disable');
} else {
var index = $(this).parents('.table-box').index();
console.log(index);
$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>