【答客問】TextBox接龍問題補遺

2011-07-02 10:07 AM

網友泡泡出了一道Super Tables套件的衍生題:

當freeze-col中也有<input>...
$("div.sFData").empty() 這招是把"接龍"解決了
可是, freeze-col 內的值就是不給我更新 u.u
無論我寫什麼在上邊，它就只會拿著一開始載入時的值...
不在 freeze-col 內的東西全都正常 @@

之前沒想到固定欄位區也出現輸入欄位的情境，但推敲之後，大致能理解freeze-col區<input>資料不會更新的原因:

SuperTables會將同樣的Table複製成兩份，freeze-col範圍的欄位會顯示在.sFData區的那一份，.sData區那一份則被藏起來，剛好跟之前範例中所處理T1, T2 <input>的狀況相反。$("div.sFData").empty()會造成freeze-col區顯示出來且使用者修改過資料的<input>被清除，送回後端是.sData區被隱藏起來包含開始載入值的那一份，造成了修改值遺失的現象。

要解決這個問題，我的想法是在$(“div.sFData”).empty()前將凍結欄位區的<input>搶救出來，拿來取代div.sData放著載入值的隱藏版。試寫了一下，憑藉jQuery的強大威力，只花了幾行Code就完成太子換狸貓的把戲，解決了棘手問題。

以下的ASP.NET網頁範例，fixedCols被設為1且故意在第一欄也放入<asp:TextBox>。網頁送出前使用上回提到的$("div.sFData”).empty()方法，會造成TextBox T1的結果正常，但TextBox C1,C2輸入值Postback後遺失。在$("#btnSubmit”).click()清除div.sFData前加入一小段jQuery程式，原理是找出sFData區每個<tr>的前fixedCols個<td>，以該<td>內容去置換sData區"相對位置"的<td>內容。在$("div.sFData”).empty()前將使用者修改後的結果移到sData區，就能將正確資料POST回伺服器端，確保C1, C2的值順利更新囉!

<%@ Page Language="C#" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

    <style type="text/css">

    .altRow { background-color: #ddddff; }

    </style>

    <link href="superTables.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="jquery-1.3.1.js"></script>

    <script type="text/javascript" src="superTables.js"></script>

    <script type="text/javascript" src="jquery.superTable.js"></script>

    <script type="text/javascript">

        $(function () {

            //設定SuperTable

            $("#myTable").toSuperTable({ width: "300px", height: "120px", fixedCols: 1 });

            $("#btnSubmit").click(function () {

                //將fixedCols區的<input>先保存起來

                //指定固定欄位數

                var fixedColsCount = 1;

                //先取得sData區的<tr>集合

                var $dataTRs = $("div.sData tbody > tr");

                //針對.sFData區的<tr>逐列處理

                $("div.sFData tbody > tr").each(function (i) {

                    var $dataTDs = $dataTRs.eq(i).children("td");

                    //逐一處理前fixedCols個<td>

                    $(this).children("td:lt(" + fixedColsCount + ")")

                    .each(function (j) {

                        //將.sFData區的<td>搬去.sData的相對<td>

                        $dataTDs.eq(j).empty().append($(this).children());

});

});

                //確定送出要離開本頁面時才可執行，不然會導致SuperTable失效

                $("div.sFData").empty();

});

});

    </script>

    <style type="text/css">

    .clsLinkButton

    { font-size: 9pt; cursor: pointer; text-decoration: underline; color: Blue; }

    #rowIdx { width: 20px; text-align: right; }

    #spnCmdBar { font-size: 9pt; margin-left: 15px; }

    div.sFData input { width: 30px; }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <input type="submit" value="Submit" id="btnSubmit" />

    <table id="myTable" border="1">

        <tr><td>No</td><td>Col1</td><td>Col2</td></tr>

        <tr><td><asp:TextBox ID="C1" Text="A" runat="server" Width="30"/></td>

        <td><asp:TextBox ID="T1" runat="server" Text="1" /></td><td>T1</td></tr>

        <tr><td><asp:TextBox ID="C2" Text="B" runat="server" Width="30"/></td>

        <td><asp:TextBox ID="T2" runat="server" Text="2" /></td><td>T2</td></tr>

    </table>

    </form>

</body>

</html>

Comments

# 2011-07-02 11:46 PM by 泡泡

超感謝!!!!!!!! 這困擾了我一整天 XDDD 話說回來, 更新時整個 freeze-cols 消失掉好好笑 XD

# 2011-08-13 06:35 AM by li jayden

按照你给的方式，并不能解决问题，急请指教，msn:dongzeli@hotmail.com

# 2011-08-13 08:10 PM by Jeffrey

to li jayden, 歡迎您將遇到的狀況細節分享出來，網友們也可以一起研討。

# 2012-05-02 10:05 PM by Or2

我有的問題，textbox 在固定端可使用，但下拉式選單卻發生兩個問題，一個是在postback後，所選的值又會跳回去原本的value，第二是在固定欄位時，會把原本binding的值給改掉，不知道版主有甚麼解法嗎？

# 2012-09-25 04:08 AM by chobits

超感謝的~ 問題迎刃而解了

# 2014-06-05 12:27 AM by kinghong

我的想法是移除多出來的input //指定固定欄位數 var fixedColsCount = vfixedColsCount; //針對.sFData區的<tr>逐列處理(左邊) $("div.sFData tbody > tr").each(function (i) { //移除放在固定 Div 大於固定欄位數的 input $(this).children("td:gt(" + fixedColsCount + ") :input").remove(); }); //針對.sData區的<tr>逐列處理(右邊) $("div.sData tbody > tr").each(function (i) { //移除放在固定 Div 裡的 input $(this).children("td:lt(" + fixedColsCount + ") :input").remove(); });

# 2014-06-05 12:47 AM by kinghong

寫錯了，是這樣而且在跑完SuperTable馬上執行而不是在存檔在執行這樣的好處是 js 去檢查 input 欄位時，才不會因為有二個相同的name 掛掉~ //指定固定欄位數 var fixedColsCount = vfixedColsCount; //針對.sFData區的<tr>逐列處理(左邊) $("div.sFData tbody > tr").each(function (i) { //移除放在固定 Div 大於固定欄位數的 input $(this).children("td:gt(" + fixedColsCount + ")").find(":input").remove(); }); //針對.sData區的<tr>逐列處理(右邊) $("div.sData tbody > tr").each(function (i) { //移除放在固定 Div 裡的 input $(this).children("td:lt(" + fixedColsCount + ")").find(":input").remove(); });

# 2014-06-05 03:51 PM by Jeffrey

to kinghong, 感謝分享。這些年又多了不少JavaScript Grid的選擇，部分支援欄、列凍結效果，例如: Kendo UI Grid(http://demos.telerik.com/kendo-ui/grid/frozen-columns)、webix DataTable (http://webix.com/widget/datatable/) 可以參考看看。