sanyue_
sanyue_
采纳率100%
2017-08-17 02:41 阅读 2.1k

我用superTable.js锁定了Repeater的标题和前两列,前面写的js就失效了

30

图片说明

我锁定的是表头和前两列,第二列的复选框在我锁定之前是点击之后改变整行的背景颜色。
然后现在锁定了点击改变背景颜色就不行了。

图片说明
只要进了这个js ,之前的就失效了。各位前辈,帮帮忙,拜托了!!!!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

5条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2017-08-17 03:03

    应该是另外克隆了dom对象,不是原来的了,所以你之前绑定的事件无效了,你用的这个是居于supperTable打包成jquery的?没找到居于jquery的,有一个需要注册下载太麻烦就不弄了

    将代码和生成的客户端html代码打包发上来看看

    点赞 1 评论 复制链接分享
  • sanyue_ sanyue_ 2017-08-17 03:34

    这是代码

        <script type="text/javascript">
              $(document).ready(function () {
                  $(":checkbox").click(function () {
                      if ($(this).attr("checked")) {
                          var _classname = $(this).parents("tr").attr('class');
                          $(this).parents("tr").addClass("row_selected");
                          if (_classname == "row_gray MouseOver") {
                              $(this).parents("tr").removeClass("row_gray");
                              $(this).parents("tr").addClass("row_selected");
                              $(this).parents("tr").addClass("MouseOver_gray");
                          }
                          $(this).attr("checked");
                          if (!$("#cbxSelect").attr("checked")) {
                              $("#cbxSelect").attr("checked", true);
                          }
                      } else {
                          $(this).parents("tr").removeClass("row_selected")
                          $(this).attr("checked");
                          if ($("#cbxSelect").attr("checked")) {
                              if ($('input:checked').length == 1) {
                                  $("#cbxSelect").attr("checked", false);
                              }
                          }
                          $(this).parents("tr.MouseOver_gray").attr("class", "row_gray");
                      }
                  });
                  $("#cbxSelect").click(function () {
                      if (!$("#cbxSelect").attr("checked")) {
                          $("input:checkbox").attr("checked", false, $(this).attr("checked", false));
                          $("table tr").removeClass("row_selected");
                          $(".MouseOver_gray").attr("class", "row_gray");
                      }
                  });
                });
        </script>
      <script type="text/javascript">
                 $(function () {
                     $("#tableFirst").toSuperTable({ width: "99%", height: "505px", fixedCols: 2 })
                 });
        </script>
    
    
            <table width="1700" border="0" cellspacing="1" cellpadding="1" class="tbl_inquiry" id="tableFirst" >
                        <tr style="font-size:12px;" id="thead">
                            <th class="head" width="20">&nbsp;</th>
                            <th class="head center" style="width: 20px;">
                                <input type="checkbox" id="cbxSelect" name="cbxSelect"/></th>
                            <th class="head left" width="150"><strong>单据编号</strong></th>
                            <th class="head right" width="80"><strong>订单日期</strong></th>
                            <th class="head " width="130" style="border-color:#bbb;"><strong>公司名称</strong></th>
                            <th class="head " width="90"><strong>型 号</strong></th>
                            <th class="head" width="70"><strong>品 牌</strong></th>
                            <th class="head center" width="60"><strong>数量</strong></th>
                            <th class="head" width="85"><strong>销售单价(USD)</strong></th>
                            <th class="head" width="90"><strong>美金总额</strong></th>
                            <th class="head center" width="40"><strong>汇率</strong></th>
                            <th class="head" width="90"><strong>折算RMB</strong></th>
                            <th class="head center" width="60"><strong>进货数量</strong></th>
                            <th class="head " width="75"><strong>采购价(RMB)</strong></th>
                            <th class="head " width="90"><strong>金额</strong></th>
                            <th class="head " width="50"><strong>加工/运费</strong></th>
                            <th class="head " width="90"><strong>利润(RMB)</strong></th>
                            <th class="head center" width="50"><strong>销售员</strong><br />
                            </th>
                            <th class="head center" width="50"><strong>采购员</strong></th>
                            <th class="head" width="200"><strong>备注</strong></th>
                        </tr>
                        <asp:Repeater ID="rpOrderReturn" runat="server">
                            <ItemTemplate>
                                <asp:Literal runat="server" ID="LitTr"></asp:Literal>
                                 <td style="display:none;">
                                        <asp:Literal ID="litID" Text='<%# Eval("ID") %>' runat="server" />
                                    </td>
                                <td class="center"><%#Eval("RowNumber") %></td>
                                <td class="center"><asp:CheckBox ID="cbxSelect" runat="server"/></td>
                                <td><asp:Literal runat="server" ID="LitOrderNo" Text='<%#Eval("OrderNo") %>'></asp:Literal></td>
                                <td style="white-space: nowrap; cursor: pointer;" title="<%#Eval("OrderTime") %>">
                                    <asp:Literal runat="server" ID="LitOrderTime" Text='<%#Eval("OrderTime") %>'></asp:Literal></td>
                                <td style="white-space: nowrap; cursor: pointer;" title="<%#Eval("DeliveryCompanyName") %>">
                                    <asp:Literal runat="server" ID="LitDeliveryCompanyName" Text='<%#Eval("DeliveryCompanyName") %>'></asp:Literal></td>
                                <td style="white-space: nowrap;">
                                    <asp:Literal runat="server" ID="LitRequestNo" Text='<%#Eval("RequestPartNo") %>'></asp:Literal></td>
                                <td style="white-space: nowrap; cursor: pointer;" title="<%#Eval("RequestBrand") %>">
                                    <asp:Literal runat="server" ID="LitRequestBrand" Text='<%#Eval("RequestBrand") %>'></asp:Literal></td>
                                <td class="center">
                                    <asp:Literal runat="server" ID="LitRequestQty" Text='<%#Eval("ProductQty") %>'></asp:Literal></td>
                                <td>
                                    <asp:Literal runat="server" ID="LitRequestPrice" Text='<%#Eval("RequestPrice") %>'></asp:Literal></td>
                                <td><span style="color: Green;">
                                    <asp:Literal runat="server" ID="LitUsdCount"></asp:Literal></span></td>
                                <td class="center">
                                    <asp:Literal runat="server" ID="Litrate"></asp:Literal></td>
                                <td><span style="color: Green;">
                                    <asp:Literal runat="server" ID="LitRMB"></asp:Literal></span></td>
                                <td class="center">
                                    <asp:Literal runat="server" ID="LitOrderRequestQty" Text='<%#Eval("ProductQty") %>'></asp:Literal></td>
                                <td>
                                    <asp:Literal runat="server" ID="LitCostPrice" Text='<%#Eval("CostPrice") %>'></asp:Literal></td>
                                <td><span style="color: Green;">
                                    <asp:Literal runat="server" ID="LitRMBCount"></asp:Literal></span></td>
                                <td>
                                    <asp:Literal runat="server" ID="LitDeliveryCharge" Text='<%#Eval("OtherCharge") %>'></asp:Literal></td>
                                <td><span style="color: green;">
                                    <asp:Literal runat="server" ID="LitPrice"></asp:Literal></span></td>
                                <td class="center">
                                    <asp:Literal runat="server" ID="LitSalesID" Text='<%#Eval("SalesID")%>'></asp:Literal></td>
                                <td class="center">
                                    <asp:Literal runat="server" ID="LitAdminLoginPurchaseID" Text='<%#Eval("AdminLoginPurchaseID") %>'></asp:Literal></td>
                                <td>
                                    <asp:Literal runat="server" ID="LitSalesRemark" Text='<%#Eval("SalesRemark") %>'></asp:Literal></td>
                                </tr> 
                            </ItemTemplate>
                        </asp:Repeater>
                        <tr>
                            <td colspan="9" style="text-align: center; color: red;"><strong>合计:</strong></td>
                            <td><span style="color: red;">
                                <asp:Literal runat="server" ID="LitUsdPrice"></asp:Literal></span></td>
                            <td>&nbsp;</td>
                            <td><span style="color: red;">
                                <asp:Literal runat="server" ID="LitRmbPrice"></asp:Literal></span></td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td><span style="color: red;">
                                <asp:Literal runat="server" ID="LitPriceCount"></asp:Literal></span></td>
                            <td><span style="color: red;">
                                <asp:Literal runat="server" ID="LitJia"></asp:Literal></span></td>
                            <td><span style="color: red;">
                                <asp:Literal runat="server" ID="LitCountRmb"></asp:Literal></span></td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                </table>
    
    点赞 评论 复制链接分享
  • sanyue_ sanyue_ 2017-08-17 05:50

    jquery.superTable.js 代码

    (function ($) {
        $.fn.extend(
                {
                    toSuperTable: function (options) {
                        var setting = $.extend(
                        {
                            width: "640px", height: "320px",
                            margin: "10px", padding: "0px",
                            overflow: "hidden", colWidths: undefined,
                            fixedCols: 0, headerRows: 1,
                            onStart: function () { },
                            onFinish: function () { },
                            cssSkin: "sSky"
                        }, options);
                        return this.each(function () {
                            var q = $(this);
                            var id = q.attr("id");
                            q.removeAttr("style").wrap("<div id='" + id + "_box'></div>");
    
                            var nonCssProps = ["fixedCols", "headerRows", "onStart", "onFinish", "cssSkin", "colWidths"];
                            var container = $("#" + id + "_box");
    
                            for (var p in setting) {
                                if ($.inArray(p, nonCssProps) == -1) {
                                    container.css(p, setting[p]);
                                    delete setting[p];
                                }
                            }
                            var mySt = new superTable(id, setting);
                        });
                    }
                });
    })(jQuery);
    
    
    点赞 评论 复制链接分享
  • sanyue_ sanyue_ 2017-08-17 05:50

    superTables.js 代码

    
    var superTable = function (tableId, options) {
        /////* Initialize */
        options = options || {};
        this.cssSkin = options.cssSkin || "";
        this.headerRows = parseInt(options.headerRows || "1");
        this.fixedCols = parseInt(options.fixedCols || "0");
        this.colWidths = options.colWidths || [];
        this.initFunc = options.onStart || null;
        this.callbackFunc = options.onFinish || null;
        this.initFunc && this.initFunc();
    
    
        /////* Create the framework dom */
        this.sBase = document.createElement("DIV");
        this.sFHeader = this.sBase.cloneNode(false);
        this.sHeader = this.sBase.cloneNode(false);
        this.sHeaderInner = this.sBase.cloneNode(false);
        this.sFData = this.sBase.cloneNode(false);
        this.sFDataInner = this.sBase.cloneNode(false);
        this.sData = this.sBase.cloneNode(false);
        this.sColGroup = document.createElement("COLGROUP");
    
        this.sDataTable = document.getElementById(tableId);
        this.sDataTable.style.margin = "0px"; /* Otherwise looks bad */
        if (this.cssSkin !== "") {
            this.sDataTable.className += " " + this.cssSkin;
        }
        if (this.sDataTable.getElementsByTagName("COLGROUP").length > 0) {
            this.sDataTable.removeChild(this.sDataTable.getElementsByTagName("COLGROUP")[0]); /* Making our own */
        }
        this.sParent = this.sDataTable.parentNode;
        this.sParentHeight = this.sParent.offsetHeight;
        this.sParentWidth = this.sParent.offsetWidth;
    
        /////* Attach the required classNames */
        this.sBase.className = "sBase";
        this.sFHeader.className = "sFHeader";
        this.sHeader.className = "sHeader";
        this.sHeaderInner.className = "sHeaderInner";
        this.sFData.className = "sFData";
        this.sFDataInner.className = "sFDataInner";
        this.sData.className = "sData";
    
        /////* Clone parts of the data table for the new header table */
        var alpha, beta, touched, clean, cleanRow, i, j, k, m, n, p;
        this.sHeaderTable = this.sDataTable.cloneNode(false);
        if (this.sDataTable.tHead) {
            alpha = this.sDataTable.tHead;
            this.sHeaderTable.appendChild(alpha.cloneNode(false));
            beta = this.sHeaderTable.tHead;
        } else {
            alpha = this.sDataTable.tBodies[0];
            this.sHeaderTable.appendChild(alpha.cloneNode(false));
            beta = this.sHeaderTable.tBodies[0];
        }
        alpha = alpha.rows;
        for (i = 0; i < this.headerRows; i++) {
            beta.appendChild(alpha[i].cloneNode(true));
        }
        this.sHeaderInner.appendChild(this.sHeaderTable);
    
        if (this.fixedCols > 0) {
            this.sFHeaderTable = this.sHeaderTable.cloneNode(true);
            this.sFHeader.appendChild(this.sFHeaderTable);
            this.sFDataTable = this.sDataTable.cloneNode(true);
            this.sFDataInner.appendChild(this.sFDataTable);
        }
    
        /////* Set up the colGroup */
        alpha = this.sDataTable.tBodies[0].rows;
        for (i = 0, j = alpha.length; i < j; i++) {
            clean = true;
            for (k = 0, m = alpha[i].cells.length; k < m; k++) {
                if (alpha[i].cells[k].colSpan !== 1 || alpha[i].cells[k].rowSpan !== 1) {
                    i += alpha[i].cells[k].rowSpan - 1;
                    clean = false;
                    break;
                }
            }
            if (clean === true) break; /* A row with no cells of colSpan > 1 || rowSpan > 1 has been found */
        }
        cleanRow = (clean === true) ? i : 0; /* Use this row index to calculate the column widths */
        for (i = 0, j = alpha[cleanRow].cells.length; i < j; i++) {
            if (i === this.colWidths.length || this.colWidths[i] === -1) {
                this.colWidths[i] = alpha[cleanRow].cells[i].offsetWidth;
            }
        }
        for (i = 0, j = this.colWidths.length; i < j; i++) {
            this.sColGroup.appendChild(document.createElement("COL"));
            this.sColGroup.lastChild.setAttribute("width", this.colWidths[i]);
        }
        this.sDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sDataTable.firstChild);
        this.sHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sHeaderTable.firstChild);
        if (this.fixedCols > 0) {
            this.sFDataTable.insertBefore(this.sColGroup.cloneNode(true), this.sFDataTable.firstChild);
            this.sFHeaderTable.insertBefore(this.sColGroup.cloneNode(true), this.sFHeaderTable.firstChild);
        }
    
        /////* Style the tables individually if applicable */
        if (this.cssSkin !== "") {
            this.sDataTable.className += " " + this.cssSkin + "-Main";
            this.sHeaderTable.className += " " + this.cssSkin + "-Headers";
            if (this.fixedCols > 0) {
                this.sFDataTable.className += " " + this.cssSkin + "-Fixed";
                this.sFHeaderTable.className += " " + this.cssSkin + "-FixedHeaders";
            }
        }
    
        /////* Throw everything into sBase */
        if (this.fixedCols > 0) {
            this.sBase.appendChild(this.sFHeader);
        }
        this.sHeader.appendChild(this.sHeaderInner);
        this.sBase.appendChild(this.sHeader);
        if (this.fixedCols > 0) {
            this.sFData.appendChild(this.sFDataInner);
            this.sBase.appendChild(this.sFData);
        }
        this.sBase.appendChild(this.sData);
        this.sParent.insertBefore(this.sBase, this.sDataTable);
        this.sData.appendChild(this.sDataTable);
    
        /////* Align the tables */
        var sDataStyles, sDataTableStyles;
        this.sHeaderHeight = this.sDataTable.tBodies[0].rows[(this.sDataTable.tHead) ? 0 : this.headerRows].offsetTop;
        sDataTableStyles = "margin-top: " + (this.sHeaderHeight * -1) + "px;";
        sDataStyles = "margin-top: " + this.sHeaderHeight + "px;";
        sDataStyles += "height: " + (this.sParentHeight - this.sHeaderHeight) + "px;";
        if (this.fixedCols > 0) {
            /* A collapsed table's cell's offsetLeft is calculated differently (w/ or w/out border included) across broswers - adjust: */
            this.sFHeaderWidth = this.sDataTable.tBodies[0].rows[cleanRow].cells[this.fixedCols].offsetLeft;
            if (window.getComputedStyle) {
                alpha = document.defaultView;
                beta = this.sDataTable.tBodies[0].rows[0].cells[0];
                if (navigator.taintEnabled) { /* If not Safari */
                    this.sFHeaderWidth += Math.ceil(parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width")) / 2);
                } else {
                    this.sFHeaderWidth += parseInt(alpha.getComputedStyle(beta, null).getPropertyValue("border-right-width"));
                }
            } else if (/*@cc_on!@*/0) { /* Internet Explorer */
                alpha = this.sDataTable.tBodies[0].rows[0].cells[0];
                beta = [alpha.currentStyle["borderRightWidth"], alpha.currentStyle["borderLeftWidth"]];
                if (/px/i.test(beta[0]) && /px/i.test(beta[1])) {
                    beta = [parseInt(beta[0]), parseInt(beta[1])].sort();
                    this.sFHeaderWidth += Math.ceil(parseInt(beta[1]) / 2);
                }
            }
    
            /* Opera 9.5 issue - a sizeable data table may cause the document scrollbars to appear without this: */
            if (window.opera) {
                this.sFData.style.height = this.sParentHeight + "px";
            }
    
            this.sFHeader.style.width = this.sFHeaderWidth + "px";
            sDataTableStyles += "margin-left: " + (this.sFHeaderWidth * -1) + "px;";
            sDataStyles += "margin-left: " + this.sFHeaderWidth + "px;";
            sDataStyles += "width: " + (this.sParentWidth - this.sFHeaderWidth) + "px;";
        } else {
            sDataStyles += "width: " + this.sParentWidth + "px;";
        }
        this.sData.style.cssText = sDataStyles;
        this.sDataTable.style.cssText = sDataTableStyles;
    
        /////* Set up table scrolling and IE's onunload event for garbage collection */
        (function (st) {
            if (st.fixedCols > 0) {
                st.sData.onscroll = function () {
                    st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
                    st.sFDataInner.style.top = (st.sData.scrollTop * -1) + "px";
                };
            } else {
                st.sData.onscroll = function () {
                    st.sHeaderInner.style.right = st.sData.scrollLeft + "px";
                };
            }
            if (/*@cc_on!@*/0) { /* Internet Explorer */
                window.attachEvent("onunload", function () {
                    st.sData.onscroll = null;
                    st = null;
                });
            }
        })(this);
    
        this.callbackFunc && this.callbackFunc();
    };
    
    点赞 评论 复制链接分享
  • sanyue_ sanyue_ 2017-08-17 07:43

    css

     .sBase {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    /* HEADERS */
    .sHeader {
        position: absolute;
        z-index: 3;
        background-color: #ffffff;
    }
    .sHeaderInner {
        position: relative;
    }
    .sHeaderInner table {
        border-spacing: 0px 0px !important;
        border-collapse: collapse !important;
        width: 1px !important;
        table-layout: fixed !important;
        background-color: #ffffff; /* Here b/c of Opera 9.25 :( */
    }
    
    /* HEADERS - FIXED */
    .sFHeader {
        position: absolute;
        z-index: 4;
        overflow: hidden;
    }
    .sFHeader table {
        border-spacing: 0px 0px !important;
        border-collapse: collapse !important;
        width: 1px !important;
        table-layout: fixed !important;
        background-color: #ffffff; /* Here b/c of Opera 9.25 :( */
    }
    
    /* BODY */
    .sData {
        position: absolute;
        z-index: 2;
        overflow: auto;
        background-color: #ffffff;
    }
    .sData table {
        border-spacing: 0px 0px !important;
        border-collapse: collapse !important;
        width: 1px !important;
        table-layout: fixed !important;
    }
    
    /* BODY - FIXED */
    .sFData {
        position: absolute;
        z-index: 1;
        background-color: #ffffff;
    }
    .sFDataInner {
        position: relative;
    }
    .sFData table {
        border-spacing: 0px 0px !important;
        border-collapse: collapse !important;
        width: 1px !important;  
        table-layout: fixed !important;
    }
    
    
    /*
    ///////////////////////////////////////////////////////////////////////////////////////// 
    // Super Tables - Skin Classes
    // Remove if not needed
    ///////////////////////////////////////////////////////////////////////////////////////// 
    */
    
    /* sDefault */
    .sDefault {
        margin: 0px;
        padding: 0px;
        border: none;
        font-family: Verdana, Arial, sans serif;
        font-size: 0.8em;
    }
    .sDefault th, .sDefault td {
        border: 1px solid #cccccc;
        padding: 3px 6px 3px 4px;
        white-space: nowrap;
    }
    .sDefault th {
        background-color: #e5e5e5;
        border-color: #c5c5c5;
    }
    .sDefault-Fixed {
        background-color: #eeeeee;
        border-color: #c5c5c5;
    }
    
    /* sSky */
    .sSky {
        margin: 0px;
        padding: 0px;
        border: none;
        font-family: Verdana, Arial, sans serif;
        font-size: 0.8em;
    }
    .sSky th, .sSky td {
        border: 1px solid #9eb6ce;
        padding: 3px 6px 3px 4px;
        white-space: nowrap;
    }
    .sSky th {
        background-color: #CFDCEE;
    }
    .sSky-Fixed {
        background-color: #e4ecf7;
    }
    
    /* sOrange */
    .sOrange {
        margin: 0px;
        padding: 0px;
        border: none;
        font-family: Verdana, Arial, sans serif;
        font-size: 0.8em;
    }
    .sOrange th, .sOrange td {
        border: 1px solid #cebb9e;
        padding: 3px 6px 3px 4px;
        white-space:normal;/*nowrap,normal*/
    }
    .sOrange th {
        background-color: #ECD8C7;
    }
    .sOrange-Fixed {
        background-color: #f7ede4;
    }
    
    /* sDark */
    .sDark {
        margin: 0px;
        padding: 0px;
        border: none;
        font-family: Verdana, Arial, sans serif;
        font-size: 0.8em;
        color: #ffffff;
    }
    .sDark th, .sDark td {
        border: 1px solid #555555;
        padding: 3px 6px 3px 4px;
        white-space: nowrap;
    }
    .sDark th {
        background-color: #000000;
    }
    .sDark-Fixed {
        background-color: #222222;
    }
    .sDark-Main {
        background-color: #333333;
    }
    
    点赞 评论 复制链接分享

相关推荐