黑马程序员技术交流社区

标题: 【上海校区】jquery选择器与监听、校验事件的结合处理（... [打印本页]

作者: 梦缠绕的时候 时间: 2018-9-5 09:38
标题: 【上海校区】jquery选择器与监听、校验事件的结合处理（...
最后的效果界面：

以如上所示表单信息为例，
前提：表单已生成
必须明确一点：在修改完数据以后，必须重新加载table,否则界面保持不变。
1、实现table添加控件：

添加switch开关，如【主键】和【允许为空】，以【主键】为例：重点：templet: '#switchTpl'与<script>标签中的id一致，其中标签中的lay-filter="ifKeyDemo"定义了监听事件

{field :'isSerial' , title :'主键', minWidth : 120, templet: '#switchTpl', unresize : true}


<script id="switchTpl"  type="text/html">

<input type="checkbox"  name = "ifKey" value = {{d.colNo}} lay-skin="switch" lay-text="T|F" lay-filter="ifKeyDemo" {{ d.isSerial == 'T' ? 'checked' : '' }}>
</script>

监听事件实现的功能有：A、【主键】和【允许为空】只能有一个为"T"；
                                 B、【主键】列，只有一个为“T”；
                                 C、  当【主键】修改值时，下方“列”中【是否主键】随之修改；

效果如下所示：

分析：A：【主键】和【允许为空】只能有一个为"T"；即在同一行，【允许为空】已选为“T”时，再点击【主键】，【允许为空】的值自动变更为“F” 。
因此需要获取：所在行，以便判断同一行的【允许为空】的值是否为“T”；
                        所在行对应的数据，以便修改【允许为空】的值。
在监听事件中获取所在行的选择器：
form.on('switch(ifKeyDemo)', function(obj){
// 获取当前控件
var selectIfKey=obj.othis;
// 获取当前所在行
var parentTr = selectIfKey.parents("tr");
//略
}）；

其中tableData用于存放table中的所有数据,用于存放table的每条数据的内容，tableData的格式如上图所示：
因此只要知道当前行所对应的tableData中第几条数据即可，即tableData的索引值：
在监听事件中获取所在行对应的数据：
   // 获取当前页数
var currPage = $('.layui-laypage-skip').find('input').val()
// 公共方法：获取table当前页记录索引
dataIndex=getTableIndexInfo(parentTr); //获取tableData的索引值，即第几条数据

// 公共方法：获取table当前页记录索引
      var getTableIndexInfo=function(parentTr){
            // 获取当前页面所在行的索引
            var parentTrIndex = parentTr.attr("data-index");//根据jquery中属性确定在当前展示页的第几行
            // 获取每页最大可存放的记录条数
            var perSize = $('.layui-laypage-limits').find('select').val();//根据jquery中类选择器获取：每页有几条数据
            // 获取当前页数
            var currPage = $('.layui-laypage-skip').find('input').val();//现在是第几页
            // 获取当前记录Index=(当前显示页数-1)*每页记录数+当前页所在行Index
            dataIndex=(currPage-1)*perSize+parseInt(parentTrIndex);//parseInt方法去除小数部分

            return dataIndex;
      };

分析：B、【主键】列，只有一个为“T”；即在同一列，已有一个【主键】为“T”,再点击其他【主键】选为“T”时，原来的自动置为“F”。
分析：C、  当【主键】修改值时，下方“列”中【是否主键】随之修改；

//表格监听1、主键
form.on('switch(ifKeyDemo)', function(obj){
// 获取当前控件
var selectIfKey=obj.othis;
// 获取当前所在行
var parentTr = selectIfKey.parents("tr");
// 获取当前页数
var currPage = $('.layui-laypage-skip').find('input').val()
// 公共方法：获取table当前页记录索引
dataIndex=getTableIndexInfo(parentTr);

if(obj.elem.checked == true){//是主键
      // 给对象主键赋值,给form表单中对应值赋值
      tableData[dataIndex].isSerial = "T";
      // 获取允许为空的div
      tableData[dataIndex].notNull = "F";

}else{
      // 给对象赋值
      tableData[dataIndex].isSerial = "F";
}
// 遍历,其他主键都为F且只读
$.each(tableData,function(index,value){
      if(index != dataIndex){
         if(tableData[index].isSerial == "T"){
            tableData[index].isSerial = "F";
         }
      }

});
//选中所有非T的控件
layer.tips('主键只能有一个',selectIfKey,{tips:[1,"#78BA32"]});
// 公共方法：重新加载table
reloadTable('baseInfo',currPage,tableData);
// 给列表单赋值
currData =tableData[dataIndex];
defaultValue(currData);
});

作者: 不二晨 时间: 2018-9-6 11:14
奈斯

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2