qq_38919217
Daddy12132
2019-06-19 17:50
采纳率: 0%
浏览 584

制作一个考勤表格如何实现鼠标拖动选择多个单元格然后右键菜单实现批量考勤

图片说明

用bootstraptable做了一个考勤的表格。
请问怎么鼠标拖动怎么选取多个单元格弹出菜单然后批量设置呢?

html代码

<button class="btn btn-primary" type="button" id="searchBtn_Table" onclick="ifnull()">查询</button>
<div class="col-sm-12" id="singlelast">

</div>

js

function ifnull() {
            if ($("#TeamGroupName").val() == "0") {
                zcy.alert.error("请选择需要查询的班组");
                return false;
            }
            if ($("#date").val() == "") {
                zcy.alert.error("请选择需要查询的时间");
                return false;
            }
            //get数据
            getAttendanceResult();
            //加载表头日期
            var date = $("#date").val();
            var year = parseInt(date.split("-")[0]);
            var month = parseInt(date.split("-")[1]);
            var daycount = getLastDay(year, month); //得到选中月份的最大天数
            MaxDays = daycount;
            selectYear = year;


            $("#singlelast").empty();
            $("#singlelast").append("<table id='tablesinglelast' data-toggle='table' align='center' ></table>")
            var appendPos = $("#tablesinglelast");
            //$("#tablesinglelast").bootstrapTable('destroy');

            appendPos.append("<thead><tr>"+
                "<th data-field='EmployeeId' rowspan='2' id='employeeName' data-valign='middle' data-align='center'> 工号</th > " +
                "<th id='lineTd' data-field='EmployeeName' data-valign='middle' rowspan='2' data-align='center'>" +
                "<span style='float:left;margin-top:20px;'>姓名</span>" +
                "<span style='float:left;margin-top:-10px;'>日期</span>"+
                "</th > " +
                "<th data-formatter='OvertimeLength' data-valign='middle' colspan='2' data-align='center'>加班</th>" +
                "<th data-formatter='Askleavelength' data-valign='middle' colspan='2' data-align='center'>请假</th>" +
                "<th  data-valign='middle' data-align='center'>工伤</th>" +
                "</tr><tr></tr></thead>");
            //加载table_foot
            var table_foot = $("#table_foot");
            table_foot.css("display","block");
            for (var i = 1; i <= daycount; i++) {
                var appendPos2 = $("#tablesinglelast").children().eq(0).children().eq(0).children().eq(i+1 - 1);
                appendPos2.after("<th data-valign='middle' colspan='1'  data-align='center'>" + i + "</th>");

            }
            for (var i = 1; i <= daycount; i++) {
                var appendPos3 = $("#tablesinglelast").children().eq(0).children().eq(1);
                var month2 = (month > 9) ? ("" + month) : ("0" + month);
                var day = (i > 9) ? ("" + i) : ("0" + i);
                var heredate = year + "-" + month2 + "-" + day;
                var weekday = new Date(heredate).getDay();
                text = "";
                switch (weekday) {
                    case 0:
                        text = "日";
                        break;
                    case 1:
                        text = "一";
                        break;
                    case 2:
                        text = "二";
                        break;
                    case 3:
                        text = "三";
                        break;
                    case 4:
                        text = "四";
                        break;
                    case 5:
                        text = "五";
                        break;
                    case 6:
                        text = "六";
                        break;
                }
                appendPos3.append("<th data-formatter='DateAttendance' data-align='center' data-field='" + year + "-" + month2 + "-" + day + "'>" + text + "</th>");
                selectMonth = month2;
            }
            var appendPos3 = $("#tablesinglelast").children().eq(0).children().eq(1);
            appendPos3.append("<th data-formatter='OverDay' data-align='center'>天</th>"+
                "<th data-formatter='OverHour' data-align='center'>时</th>"+
                "<th data-formatter='AskleaveDay' data-align='center'>天</th>"+
                "<th data-formatter='AskleaveHour' data-align='center'>时</th>"+
                "<th data-align='center'>天</th>"
            );
            $('.context').contextmenu({
                target: '#context-menu',
                before: function (e, context) {    // execute code before context menu if shown
                }, onItem: function (context, e) {    // execute on menu item selection
                }
            });
            readyTable();
            $("#singlelast tr td").addClass();


        }

        function getLastDay(year, month) {
            var new_year = year;  //取当前的年份
            var new_month = month++;//取下一个月的第一天,方便计算(最后一天不固定)
            if (month > 12)      //如果当前大于12月,则年份转到下一年
            {
                new_month -= 12;    //月份减
                new_year++;      //年份增
            }
            var new_date = new Date(new_year, new_month, 1);        //取当年当月中的第一天
            return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期
        }
        function readyTable() {
            $("#tablesinglelast").bootstrapTable({
                //bootstraptable 插件
                pageNumber: 1,                       //初始化加载第一页,默认第一页
                pageSize: 10,                       //每页的记录行数(*)
                pageList: [10, 20, 30],
                pagination: true,                   //是否显示分页(*)
                sortable: true,                     //是否启用排序
                sortOrder: 'asc',
                striped: true,                      //行间隔色                          
                showExport: true,                     //是否显示导出
                exportDataType: 'all',
                search: true,
                detailView: false,//父子表
                onExpandRow: function (index, row, $detail) {
                    oInitInitSubTable(index, row, $detail);
                }
            });
        }
        function getAttendanceResult() {
            var TeamGroupId = $("#TeamGroupName").val();
            var date = $("#date").val();
            $.ajax({
                url: "/Employee/getAttendanceResult",
                type: "post",
                dataType: 'json',
                data: {
                    "TeamGroupId": TeamGroupId,
                    "date": date,
                },
                success: function (data) {
                    chkData = eval(data);
                    $('#tablesinglelast').bootstrapTable('load', chkData);
                },
                error: function () {
                    zcy.alert.error("获取考勤表失败");
                }
            });
        }

我用bootstrap-table-contextmenu 在getAttendanceResult实现了一个右键菜单

function getAttendanceResult() {

            //鼠标右键菜单
            $('#tablesinglelast').bootstrapTable({
                contextMenu: '#context-menu',
                onContextMenuItem: function(row, $el){
                    if ($el.data("item") == "properfunctioning") {
                        //var msg = "你确定要设置为考勤?";
                        //zcy.alert.confirm("请确认操作",msg);
                        console.log(row);
                        zcy.alert.success(""+row+"的考勤记录");
                    }
                 }
            });
            var TeamGroupId = $("#TeamGroupName").val();
            var date = $("#date").val();
            $.ajax({
                url: "/Employee/getAttendanceResult",
                type: "post",
                dataType: 'json',
                data: {
                    "TeamGroupId": TeamGroupId,
                    "date": date,
                },
                success: function (data) {
                    chkData = eval(data);
                    $('#tablesinglelast').bootstrapTable('load', chkData);
                },
                error: function () {
                    zcy.alert.error("获取考勤表失败");
                }
            });
        }

图片说明

但是获取的都是一行的值,获取不到单元格的值,该怎么办呢?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dabocaiqq
    dabocaiqq 2019-06-19 21:47

    这个可以用canvas 自己画,类似chart的做法

    点赞 评论
  • qq_27323623
    Yirujet 2019-06-20 17:04

    图片说明
    <!DOCTYPE html>

    <!--[if gt IE 8]><!--> <!--<![endif]-->









    <br> .tooltip {<br> box-shadow: 0.2em -0.2em 0.2em rgba(0, 0, 0, 0.1);<br> opacity: 1;<br> }<br> .tooltip ul {<br> list-style: none;<br> padding: 0;<br> }<br> .tooltip ul &gt; li {<br> background-color: #fff;<br> text-align: center;<br> padding: .25em;<br> margin: .1em 0;<br> cursor: pointer;<br> }<br> .tooltip ul &gt; li:hover {<br> background-color: lightblue;<br> color: #fff;<br> }<br> .tooltip a {<br> color: #999;<br> text-decoration: none;<br> display: block;<br> width: 100%;<br> }<br>



    查询
    </div>
    


    function ifnull() { if ($("#TeamGroupName").val() == "0") { // zcy.alert.error("请选择需要查询的班组"); return false; } if ($("#date").val() == "") { // zcy.alert.error("请选择需要查询的时间"); return false; } //get数据 getAttendanceResult(); //加载表头日期 var date = $("#date").val(); var year = parseInt(date.split("-")[0]); var month = parseInt(date.split("-")[1]); var daycount = getLastDay(year, month); //得到选中月份的最大天数 MaxDays = daycount; selectYear = year; $("#singlelast").empty(); $("#singlelast").append("<table id='tablesinglelast' data-toggle='table' align='center' ></table>") var appendPos = $("#tablesinglelast"); //$("#tablesinglelast").bootstrapTable('destroy'); appendPos.append("<thead><tr>"+ "<th data-field='EmployeeId' rowspan='2' id='employeeName' data-valign='middle' data-align='center'> 工号</th > " + "<th id='lineTd' data-field='EmployeeName' data-valign='middle' rowspan='2' data-align='center'>" + "<span style='float:left;margin-top:20px;'>姓名</span>" + "<span style='float:left;margin-top:-10px;'>日期</span>"+ "</th > " + "<th data-formatter='OvertimeLength' data-valign='middle' colspan='2' data-align='center'>加班</th>" + "<th data-formatter='Askleavelength' data-valign='middle' colspan='2' data-align='center'>请假</th>" + "<th data-valign='middle' data-align='center'>工伤</th>" + "</tr><tr></tr></thead>"); //加载table_foot var table_foot = $("#table_foot"); table_foot.css("display","block"); for (var i = 1; i <= daycount; i++) { var appendPos2 = $("#tablesinglelast").children().eq(0).children().eq(0).children().eq(i+1 - 1); appendPos2.after("<th data-valign='middle' colspan='1' data-align='center'>" + i + "</th>"); } for (var i = 1; i <= daycount; i++) { var appendPos3 = $("#tablesinglelast").children().eq(0).children().eq(1); var month2 = (month > 9) ? ("" + month) : ("0" + month); var day = (i > 9) ? ("" + i) : ("0" + i); var heredate = year + "-" + month2 + "-" + day; var weekday = new Date(heredate).getDay(); text = ""; switch (weekday) { case 0: text = "日"; break; case 1: text = "一"; break; case 2: text = "二"; break; case 3: text = "三"; break; case 4: text = "四"; break; case 5: text = "五"; break; case 6: text = "六"; break; } // appendPos3.append("<th data-formatter='DateAttendance' data-align='center' data-field='" + year + "-" + month2 + "-" + day + "'>" + text + "</th>"); appendPos3.append("<th data-align='center' data-field='" + year + "-" + month2 + "-" + day + "'>" + text + "</th>"); selectMonth = month2; } var appendPos3 = $("#tablesinglelast").children().eq(0).children().eq(1); appendPos3.append("<th data-formatter='OverDay' data-align='center'>天</th>"+ "<th data-formatter='OverHour' data-align='center'>时</th>"+ "<th data-formatter='AskleaveDay' data-align='center'>天</th>"+ "<th data-formatter='AskleaveHour' data-align='center'>时</th>"+ "<th data-align='center'>天</th>" ); $('.context').contextmenu({ target: '#context-menu', before: function (e, context) { // execute code before context menu if shown }, onItem: function (context, e) { // execute on menu item selection } }); readyTable(); $("#singlelast tr td").addClass(); $('#tablesinglelast').bootstrapTable('load', data); var tbody = document.getElementById('tablesinglelast').getElementsByTagName('TBODY')[0]; tbody.style.userSelect = 'none'; arySelect = []; tbody.addEventListener('mousedown', down); tbody.addEventListener('mouseup', up); for(let i = 0, len = tbody.children.length; i < len; i++) { var tr = tbody.children[i]; var td = tbody.children[i].children; Array.from(td).forEach(e => e.addEventListener('mouseenter', enter)); } var flag = false; function down(e) { flag = true; // Array.from(td).forEach(e => e.style.backgroundColor = 'transparent'); // tbody.style.userSelect = 'none'; // arySelect.length = 0; clear(); var e = e.target; if(e.tagName == 'TD') { e.style.backgroundColor = 'blue'; arySelect.push(e.innerHTML); } cancle(); } function up(e) { flag = false; var target = e.target; console.log(arySelect, e.x, e.y); var div = document.createElement('div'); document.getElementById('tablesinglelast').append(div); div.id = 'tooltip'; div.style.position = 'absolute'; div.style.left = e.x + 'px'; div.style.top = (e.y - 100) + 'px'; div.style.width = '100px'; div.style.height = '100px'; div.className = 'tooltip'; div.style.backgroundColor = '#eee'; var ul = document.createElement('ul'); var li = document.createElement('li'); var a = document.createElement('a'); a.innerHTML = '操作'; li.appendChild(a); ul.appendChild(li); a = document.createElement('a'); a.innerHTML = '取消'; a.addEventListener('click', cancle); li = document.createElement('li'); li.appendChild(a); ul.appendChild(li); div.appendChild(ul); } function clear() { for(let i = 0, len = tbody.children.length; i < len; i++) { var tr = tbody.children[i]; var td = tbody.children[i].children; Array.from(td).forEach(e => e.style.backgroundColor = 'transparent'); } tbody.style.userSelect = 'none'; arySelect.length = 0; } function cancle() { if(document.getElementById('tablesinglelast').children[document.getElementById('tablesinglelast').children.length - 1].id == 'tooltip') { document.getElementById('tablesinglelast').removeChild(document.getElementById('tablesinglelast').children[document.getElementById('tablesinglelast').children.length - 1]); flag = false; clear(); } } function enter(e) { tbody.style.userSelect = ''; if(flag) { e.target.style.backgroundColor = 'blue'; arySelect.push(e.target.innerHTML); } } } function getLastDay(year, month) { var new_year = year; //取当前的年份 var new_month = month++;//取下一个月的第一天,方便计算(最后一天不固定) if (month > 12) //如果当前大于12月,则年份转到下一年 { new_month -= 12; //月份减 new_year++; //年份增 } var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天 return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期 } function readyTable() { $("#tablesinglelast").bootstrapTable({ //bootstraptable 插件 pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 20, 30], pagination: true, //是否显示分页(*) sortable: true, //是否启用排序 sortOrder: 'asc', striped: true, //行间隔色 showExport: true, //是否显示导出 exportDataType: 'all', search: true, detailView: false,//父子表 onExpandRow: function (index, row, $detail) { oInitInitSubTable(index, row, $detail); } }); } function getAttendanceResult() { // var TeamGroupId = $("#TeamGroupName").val(); // var date = $("#date").val(); // $.ajax({ // url: "/Employee/getAttendanceResult", // type: "post", // dataType: 'json', // data: { // "TeamGroupId": TeamGroupId, // "date": date, // }, // success: function (data) { // chkData = eval(data); // $('#tablesinglelast').bootstrapTable('load', chkData); // }, // error: function () { // // zcy.alert.error("获取考勤表失败"); // } // }); data = [ { 'EmployeeId': 6, 'EmployeeName': '小李', '2019-06-01': 1, '2019-06-02': 2, '2019-06-03': 3, '2019-06-04': 4, '2019-06-05': 5, '2019-06-06': 6, '2019-06-07': 7, '2019-06-08': 8, '2019-06-09': 9, '2019-06-10': 10, '2019-06-11': 11, '2019-06-12': 12, '2019-06-13': 13, '2019-06-14': 14, '2019-06-15': 15, '2019-06-16': 16, '2019-06-17': 17, '2019-06-18': 18, '2019-06-19': 19, '2019-06-20': 20, '2019-06-21': 21, '2019-06-22': 22, '2019-06-23': 23, '2019-06-24': 24, '2019-06-25': 25, '2019-06-26': 26, '2019-06-27': 27, '2019-06-28': 28, '2019-06-29': 29, '2019-06-30': 30 }, { 'EmployeeId': 7, 'EmployeeName': '小王', '2019-06-01': 1, '2019-06-02': 2, '2019-06-03': 3, '2019-06-04': 4, '2019-06-05': 5, '2019-06-06': 6, '2019-06-07': 7, '2019-06-08': 8, '2019-06-09': 9, '2019-06-10': 10, '2019-06-11': 11, '2019-06-12': 12, '2019-06-13': 13, '2019-06-14': 14, '2019-06-15': 15, '2019-06-16': 16, '2019-06-17': 17, '2019-06-18': 18, '2019-06-19': 19, '2019-06-20': 20, '2019-06-21': 21, '2019-06-22': 22, '2019-06-23': 23, '2019-06-24': 24, '2019-06-25': 25, '2019-06-26': 26, '2019-06-27': 27, '2019-06-28': 28, '2019-06-29': 29, '2019-06-30': 30 } ]; }
    点赞 评论

相关推荐