網友泡泡出了一道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

# by 泡泡

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

# by li jayden

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

# by Jeffrey

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

# by Or2

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

# by chobits

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

# 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(); });

# 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(); });

# 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/) 可以參考看看。

Post a comment


53 - 40 =