• Datatables一些常见的JS用法(多与表格有关)


    **********************--倒--序--上--升--(方便新增、更新)***********************

    (3)给 动态生成 的 行 内按钮,添加点击事件(多用于分页情况下,行 内的按钮)。如

    { "data": "defaultRank", "render": function (data, type, full, meta) {
                  return "<button class='clear_wx_btn btn btn-info'>晋级</button>";
              }
              },
    
    $(document).on('click', '.clear_wx_btn', function(){
        $("#errorTip").text("")
        //var row = table.row({selected : true}).data();//这种最常见,但这种情况,第二次点击会失效(主要table要定义成全局变量)
        //var matchArea = $(this).parent().parent().children().eq(1).text()
        var row = table.row($(this).parent().parent()).data();//貌似row{param}里面的param是 jquery对象的"$行", 
        $("#rankTeamName").val(row.teamName)
        $("#rankTeamId").val(row.teamId)
        $("#teamRankModal").modal("show")
    })

    ----附:$(document) 网上说(责任越大,消耗内存越大)的一种绑定事件

    (2)创建 行 点击事件(默认为 左键 点击事件,右键的也有一例),这里展示获取 行号 和 指定列 的数据

    $('#datatable tbody').on('click','tr',function(e){
          //先拿到点击的行号 
            var index = $(this).context._DT_RowIndex;
            //此处拿到隐藏列的值
            var name = $('#datatable').DataTable().row(index).data().name;// name是"columns" { "data": "name"},里面对应的name
            layer.msg("点击_"+index+"_行,名字:"+name)
          //点击空白无效(一些特殊情况有用)
            if(name == undefined || name == ""){
                return false;
            }

    (1)鼠标移动到 行 上时,行背景高亮显示

    $('#datatable tbody')
        .on( 'mouseover', 'tr', function () {
            $(this).children().addClass( 'highlight' );
        } )
        .on( 'mouseleave', 'tr', function () {
            $(this).children().removeClass( 'highlight' );
        } );
    td.highlight {
            background-color: whitesmoke !important;
        }

    选中id = “datatable” 的表格

    ----附一:JS的初始化 顺序 和 位置 很重要,很多情况就是 初始化位置 不正确,没有生效

  • 相关阅读:
    小组互评以及自评
    构建之法的第十、十一、十二章读书笔记
    调研------典型用户及场景
    “吃神么,买神么”的第二个Sprint计划(总结)
    自动化单元测试工具 EvoSuite 的简单使用 【转载】
    2018(秋)软工作业 6:团队项目-软件设计
    2018(秋)软工作业 5:结对项目之词频统计——增强功能
    2018(秋)软工作业 4:结对项目之词频统计——基本功能
    2018(秋)软工作业 3:个人编程练习
    软件工程教学计划(2018-秋季)
  • 原文地址:https://www.cnblogs.com/zz-3m23d-begining/p/8690833.html
Copyright © 2020-2023  润新知