零、判断展示框那些可以进入编辑模式
1.trIntoEditMode($tr)
思路trIntoEditMode($tr)，获取每一行的属性判断，当前行中td是否有编辑属性edit-enable，如果有编辑的属性，获取editType来判断展示数据的形式
| 参数 |
介绍 |
$tr.children().each |
循环当前所有的tr的儿子td |
| ‘$tr.attr('has-edit','true')’ |
有证明被编辑过 |
var editEnable = $(this).attr('edit-enable') |
获取每一个td 找到edit-enable':'true' |
var editType = $(this).attr('edit-type'); |
获取每一个td 的属性看'edit-type':'select' 是否是下拉选项 |
$(this).attr('global-name') |
第二张表的数据,在前面利用@@处理过，将数据库的数据以列表的形式保存 |
$(this).attr('origin') |
获取当前，应该被自动选中的选项，这里面在生成tableb的时候做过处理替换 |
//在配置文件中设置了属性'edit-enable':'true'，用来判断谁可以进入编辑模式
function trIntoEditMode($tr){
//这里面的tr包含着当前选中的checkbox行
//给当前tr加背景色，利用 bootstrap class success 属性
$tr.addClass('success')
$tr.attr('has-edit','true')
$tr.children().each(function () {
//获取每一个td 找到edit-enable':'true'
var editEnable = $(this).attr('edit-enable');
// 获取每一个td 的属性看'edit-type':'select' 是否是下拉选项
var editType = $(this).attr('edit-type');
//可以进入编辑模式
if(editEnable=='true'){
if (editType== "select"){
//获取在全局变量中存储的数据信息
var globalName = $(this).attr('global-name');
//获取当前下拉的id
var orgin = $(this).attr('origin')
//生成select
var sel = document.createElement('select')
$.each(window[globalName],function (k1,v1) {
var op =document.createElement('option')
op.setAttribute('value',v1[0])
op.innerHTML = v1[1]
$(sel).append(op)
})
$(sel).val(orgin)
$(this).html(sel);
//如果是下拉框
/**
* <select>
* <option value="1">上线</option>
* <select>
* **/
}else if(editType=='input'){
//如果是input
// 获取当前td的值
var innterText = $(this).text();
// 创建input标签
var tag = document.createElement('input');
//input 标签中显示的值
tag.value = innterText;
// 把input 放到tr 中
$(this).html(tag);
}
}
})
}
2.trOutEditMode退出编辑模式
| 参数 |
介绍 |
$select.val() |
获取选中的select的option的value |
$select[0].selectedOptions[0].innerHTML |
获取选中的option的文本内容 |
$(this).attr('new-val',newId) |
加上新值的属性,获取到你改变后的下拉选项的val |
-
思路循环整个tr 找到符合可编辑的逻辑，判断下拉框选项
function trOutEditMode($tr){
//这里面的tr包含着当前选中的checkbox行
$tr.removeClass('success')
$tr.children().each(function () {
//获取每一个td 找到edit-enable':'true'
var editEnable = $(this).attr('edit-enable');
var editType = $(this).attr('edit-type')
if(editEnable=='true'){
//可以进入编辑模式
if(editType == "select"){
var $select = $(this).children().first();
// 获取选中的option的value
var newId = $select.val();
//获取选中的option的文本内容
var newText = $select[0].selectedOptions[0].innerHTML;
//设置td中的文本内容
$(this).html(newText);
//加上新值的属性
$(this).attr('new-val',newId)
}else if(editType == "input"){
// 获取当前td的input,获取td的第一个孩子
var $input = $(this).children().first();
// 获取input值
var inputValue = $input.val();
// 把input值 放到tr 中
$(this).html(inputValue);
$(this).attr('new-val',inputValue)
}
}
})
}
一、绑定进入编辑按钮
image.png
-
思路点击进入编辑模式，判断按钮是否有class样式，如果当前按钮有样式，证明要退出编辑模式，先移除样式，找到所有table中选中的check触发trOutEditMode函数
| 函数 |
函数中的参数 |
| trIntoEditMode |
在配置文件中设置了属性'edit-enable':'true'，用来判断谁可以进入编辑模式 |
| trOutEditMode |
// 撤销当前先选中的checkbox |
function bindEditMode() {
$('#idEditMode').click(function () {
//判断是否有颜色标记
var editing = $(this).hasClass('btn-warning');
if(editing){
//有就删除样式，退出编辑模式
$(this).removeClass('btn-warning');
$(this).text('进入编辑模式');
// 退出编辑模式时被选中的checkbox 取消选择并且退出编辑
$('#table_tb').find(':checked').each(function () {
var $currentTr = $(this).parent().parent()
// 获取当前tr 进入取消input框的选项
$currentTr.removeClass('success')
trOutEditMode($currentTr)
})
}else {
//没有就增加样式，进入编辑模式
$(this).addClass('btn-warning');
$(this).text('退出编辑模式');
// 进入编辑模式时被选中的checkbox 进行编辑
$('#table_tb').find(':checked').each(function () {
var $currentTr = $(this).parent().parent()
// 获取当前tr 进入取消input框的选项
$currentTr.addClass('success')
trIntoEditMode($currentTr)
});
}
})
}
二、checkbox选择框
思路通过事件委托绑定checked的click事件，如果当前的编辑按钮在编辑模式下，如果在判断ck是否在选中的情况，并且通过$(this).parent().parent()获得当前选中标签的tr
| 函数 |
函数中的参数 |
| trIntoEditMode |
在配置文件中设置了属性'edit-enable':'true'，用来判断谁可以进入编辑模式 |
| trOutEditMode |
// 撤销当前先选中的checkbox |
function bindCheckbox(){
//委托事件当，点击tablebody，触发checkbox 的click 事件
$('#table_tb').on('click',':checkbox',function () {
//判断当前是否是编辑模式，通过编辑按钮判断
//为了做当进入编辑模式时选中的行可以做编辑，没进入选择无效
if($('#idEditMode').hasClass('btn-warning')){
//判断当前checkbox是否选中
var ck = $(this).prop('checked');
//获取选中当前checkbox标签的整行,自定义加$为了标记可以知道可以直接使用jquery
var $current = $(this).parent().parent()
if(ck){
//进入编辑模式
//在配置文件中设置了属性'edit-enable':'true'，用来判断谁可以进入编辑模式
trIntoEditMode($current)
}else{
//退出编辑模式
$current.removeClass('success')
// 撤销当前先选中的checkbox
trOutEditMode($current)
}
}
})
}
三、全选按钮
思路，当没进入编辑模式，也就是未点击编辑按钮时，只是单方面出选中所有checkbox，当进入是额外触发trIntoEditMode函数
| 技术点 |
解析 |
| $('#table_tb').find(":checkbox"). |
找到所有的checkbox标签 |
| $(this).prop("checked",true); |
this指的是当前chekbox，加上true就有了选中的状态 |
function bindCheckAll() {
$('#idcheckall').click(function () {
$('#table_tb').find(":checkbox").each(
function () {
//判断是否在编辑模式点击全选
if($('#idEditMode').hasClass('btn-warning')){
if($(this).prop('checked')){
// 当已经勾选的时候触发的是checkbox勾选
}else{
// 没勾选 触发全选
var $currentTr = $(this).parent().parent()
$(this).prop('checked',true)
trIntoEditMode($currentTr)
}
}else {
$(this).prop("checked",true);
}
}
)
})
}
四、点击取消按钮
思路，找到所有$('#table_tb').find(":checked")选中的checkbox，通过判断当前的编辑按钮是否选中，获取tr标签，进入trOutEditMode处理
function bindCancelAll(){
$('#CancelAll').click(
function () {
$('#table_tb').find(":checked").each(
function () {
if($('#idEditMode').hasClass('btn-warning')){
var $curretntr = $(this).parent().parent()
trOutEditMode($curretntr)
$(this).prop('checked',false);
}else{
$(this).prop('checked',false);
}
}
)
}
)
}
五、点击反选按钮
循环判断选中的状态进行更改
function bindReverseAll() {
$('#idReverseAll').click(function () {
$('#table_tb').find(":checkbox").each(function () {
if($('#idEditMode').hasClass('btn-warning')){
if ($(this).prop('checked')){
$(this).prop('checked',false)
var $currentTr = $(this).parent().parent()
trOutEditMode($currentTr)
}else{
$(this).prop('checked',true)
var $currentTr = $(this).parent().parent()
trIntoEditMode($currentTr)
}
}else{
if($(this).prop('checked')){
$(this).prop('checked',false)
}else{
$(this).prop('checked',true)
}
}
})
})
}
六、保存按钮
function bindSave() {
$('#idSave').click(function () {
var postList=[]
$('#table_td').find('tr[has-edit="true"]').each(
function () {
var temp = {};
var id = $(this).attr('row-id');
temp['id'] = id;
$(this).children('[edit-enable="true"]').each(function () {
//$(this)=>td
var name = $(this).attr('name');
var origin = $(this).attr('origin');
var newVal = $(this).attr('new-val');
if(origin!=newVal){
temp[name] = newVal
}
})
postList.push(temp)
}
)
$.ajax({
url:requestUrl,
type:'PUT',
data:{'post_list':JSON.stringify(postList)},
dataType:'JSON',
success:function (arg) {
if(arg.status){
init(1);
}else{
alert("111")
}
}
})
})
}
