具有高级功能的表

Question

我非常需要帮助，我希望这里有人能给予同情并有时间回答我；）。

两周前，我正在接受培训，正在尝试向数据表添加功能。我正在考虑使用 jQuery 来实现。

这是我目前拥有的一个示例：

我在代码隐藏文件中使用 C# 构建了这个表。有人告诉我使用 gridview 或 datagrid，但此表中的单元格具有可能与 gridview 或 datagrid 不兼容的功能。事实上，我通过在必要时指定属性“class”和“rowspan / colspan”来添加每个单元格。而且我不知道是否可以使用gridview 或datagrid 来做到这一点。我需要这些多个“类”用于处理过的单元格 jQuery（注意：能够拖放）。

这是我的一些代码，展示了我如何创建此表：

aspx 代码：

<asp:Table ID="tabG" runat="server" GridLines="Both">

<asp:TableHeaderRow ID="TableHeaderRow1" runat="server" TableSection="TableHeader">
                            <asp:TableCell ID="idTitreTabG_CheckB" RowSpan="3"></asp:TableCell>
                            <asp:TableCell ID="idTitreTabG_NumOF" RowSpan="2">
                                <asp:Label ID="lbTabG_TitreNumOF" Text="N° OF" runat="server"></asp:Label> <br />
                            </asp:TableCell>
                            <asp:TableCell RowSpan="2">
                                <asp:Label ID="lbTabG_TitreSeqOF" Text="Seq OF" runat="server"></asp:Label> <br />
                            </asp:TableCell>
                            <asp:TableCell RowSpan="2">
                                <asp:Label ID="lbTabG_TitreArt" Text="Article" runat="server"></asp:Label> <br />
                            </asp:TableCell>
                            <asp:TableCell RowSpan="2">
                                <asp:Label ID="lbTabG_TitreQtePrevue" Text="Qté OF prévue" runat="server"></asp:Label> <br />
                            </asp:TableCell>
                            <asp:TableCell RowSpan="2">
                                <asp:Label ID="lbTabG_TitreQteRevue" Text="Qté OF revue" runat="server"></asp:Label> <br />
                            </asp:TableCell>
                            <asp:TableCell RowSpan="2">
                                <asp:Label ID="lbTabG_TitreComp" Text="Composant" runat="server"></asp:Label> <br />
                            </asp:TableCell>
                            <asp:TableCell RowSpan="2">
                                <asp:Label ID="lbTabG_TitreRestant" Text="Restant à assigner" runat="server"></asp:Label> <br />
                            </asp:TableCell>
                            <asp:TableCell ColumnSpan="3">
                                <asp:Label ID="lbTabG_TitreAssignHU" Text="Assignation HU" runat="server"></asp:Label>
                            </asp:TableCell>
                        </asp:TableHeaderRow>

                        <asp:TableHeaderRow ID="TableHeaderRow2" runat="server" TableSection="TableHeader">
                            <asp:TableCell>
                                <asp:Label ID="lbTabG_TitreQteTotale" Text="Qté totale" runat="server"></asp:Label> <br />
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:Label ID="lbTabG_TitreNumHU" Text="N° HU" runat="server"></asp:Label> <br />
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:Label ID="lbTabG_TitreQte" Text="Quantité" runat="server"></asp:Label> <br />
                            </asp:TableCell>
                        </asp:TableHeaderRow>

                        <asp:TableHeaderRow ID="TableHeaderRow5" runat="server" TableSection="TableHeader">
                            <asp:TableCell>
                                <asp:ImageButton ID="ibTabG_TitreNumOF_Fleche" runat="server" PostBackUrl="~/Test.aspx?nomColG=cod_wo&order=desc" ImageUrl="~/Images/bas.jpg" />
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:ImageButton ID="ibTabG_TitreSeqOF_Fleche" runat="server" PostBackUrl="~/Test.aspx?nomColG=dat_sequence&order=desc" ImageUrl="~/Images/bas.jpg" />
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:ImageButton ID="ibTabG_TitreArt_Fleche" runat="server" PostBackUrl="~/Test.aspx?nomColG=article&order=desc" ImageUrl="~/Images/bas.jpg" />
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:ImageButton ID="ibTabG_TitreQtePrevue_Fleche" runat="server" PostBackUrl="~/Test.aspx?nomColG=wo_qty&order=desc" ImageUrl="~/Images/bas.jpg" />
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:ImageButton ID="ibTabG_TitreQteRevue_Fleche" runat="server" PostBackUrl="~/Test.aspx?nomColG=qty_revue&order=desc" ImageUrl="~/Images/bas.jpg" />
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:ImageButton ID="ibTabG_TitreComposant_Fleche" runat="server" PostBackUrl="~/Test.aspx?nomColG=composant&order=desc" ImageUrl="~/Images/bas.jpg" />
                            </asp:TableCell>
                            <asp:TableCell>
                                <asp:ImageButton ID="ibTabG_TitreRestant_Fleche" runat="server" PostBackUrl="~/Test.aspx?nomColG=restant_a_assigner&order=desc" ImageUrl="~/Images/bas.jpg" />
                            </asp:TableCell>
                            <asp:TableCell>
                            </asp:TableCell>
                            <asp:TableCell>
                            </asp:TableCell>
                            <asp:TableCell>
                            </asp:TableCell>

                        </asp:TableHeaderRow>

</asp:Table>

此部分创建列的标题

完成表格的 C# 代码背后：

protected void setTabAssignationOF(OracleConnection oConnexion, string reqOF)
        {

            OracleCommand cmd = new OracleCommand(reqOF);
            cmd.Connection = oConnexion;

            OracleDataReader reader = cmd.ExecuteReader();

            int cpt = 0;
            int nbLignesCurrentOF = 0;
            int numLigne = 0;
            string idCurrentOF = "";

            List<TableRow> lignes = new List<TableRow>();

            while (reader.Read())
            {

                TableRow nouvelleLigne = new TableRow();

                CheckBox controlCB = new CheckBox();
                TableCell checkB = new TableCell();
                TableCell numOF = new TableCell();
                TableCell seqOF = new TableCell();
                TableCell art = new TableCell();
                TableCell qtePrevue = new TableCell();
                TableCell qteRevue = new TableCell();
                TableCell composant = new TableCell();
                TableCell restant = new TableCell();
                TableCell qteTotale = new TableCell();
                TableCell numHU = new TableCell();
                TableCell qteHU = new TableCell();

                if(reader.GetValue(0).ToString() == idCurrentOF){
                    TableRow ligneModifie = new TableRow();

                    nbLignesCurrentOF = nbLignesCurrentOF + 1;

                    lignes[numLigne].Cells[0].RowSpan = nbLignesCurrentOF;
                    lignes[numLigne].Cells[1].RowSpan = nbLignesCurrentOF;
                    lignes[numLigne].Cells[2].RowSpan = nbLignesCurrentOF;
                    lignes[numLigne].Cells[3].RowSpan = nbLignesCurrentOF;
                    lignes[numLigne].Cells[4].RowSpan = nbLignesCurrentOF;
                    lignes[numLigne].Cells[5].RowSpan = nbLignesCurrentOF;
                    lignes[numLigne].Cells[6].RowSpan = nbLignesCurrentOF;
                    lignes[numLigne].Cells[7].RowSpan = nbLignesCurrentOF;


                    // nouvelles lignes
                    string identifiant = lignes[numLigne].Cells[1].ID;

                    qteTotale.Text = reader.GetValue(9).ToString();
                    qteTotale.Attributes.Add("class", "tabG_qteTotale donneesOF " + lignes[numLigne].Cells[1].Text);
                    qteTotale.Attributes.Add("value", qteTotale.Text);
                    qteTotale.ID = "qteT" + identifiant + "_" + nbLignesCurrentOF;

                    numHU.Text = reader.GetValue(10).ToString();
                    numHU.Attributes.Add("class", "tabG_numHU donneesOF " + lignes[numLigne].Cells[1].Text + " " + numHU.Text.Replace(" ", "_"));
                    numHU.Attributes.Add("value", numHU.Text);
                    numHU.ID = "numHU" + identifiant + "_" + nbLignesCurrentOF;
                    numHU.Attributes.Add("onClick", "onClick_cellule(\"" + numHU.Text + "\",\"" + numHU.Text.Replace(" ", "_") + "\");");

                    qteHU.Text = reader.GetValue(11).ToString();
                    qteHU.Attributes.Add("class", "tabG_qteHU donneesOF " + lignes[numLigne].Cells[1].Text);
                    qteHU.Attributes.Add("value", qteHU.Text);
                    qteHU.ID = "qteH" + identifiant + "_" + nbLignesCurrentOF;

                    nouvelleLigne.Cells.Add(qteTotale);
                    nouvelleLigne.Cells.Add(numHU);
                    nouvelleLigne.Cells.Add(qteHU);

                    lignes.Add(nouvelleLigne);
                }
                else{
                    numLigne = numLigne + nbLignesCurrentOF;
                    nbLignesCurrentOF = 1;

                    idCurrentOF = reader.GetValue(0).ToString();

                    // la premiere colonne contient une checkbox avec le numéro de l'OF
                    checkB.ID = "cb" + reader.GetValue(0).ToString() + cpt;
                    checkB.Controls.Add(controlCB);
                    checkB.Attributes.Add("class", "tabG_checkB donneesOF " + reader.GetValue(0).ToString());
                    checkB.Attributes.Add("value", "n");

                    // les colonnes suivantes
                    numOF.Text = reader.GetValue(0).ToString();
                    numOF.Attributes.Add("class", "tabG_numOF donneesOF " + numOF.Text + " " + numOF.Text.Replace(" ","_"));
                    numOF.Attributes.Add("value", numOF.Text);
                    numOF.ID = numOF.Text;
                    numOF.Attributes.Add("onClick", "onClick_cellule(\"" + numOF.Text + "\",\"" + numOF.Text.Replace(" ","_") + "\");");

                    seqOF.Text = reader.GetValue(3).ToString();
                    seqOF.Attributes.Add("class", "tabG_seqOF donneesOF " + numOF.Text);
                    seqOF.Attributes.Add("value", seqOF.Text);
                    seqOF.ID = "seqOF" + numOF.ID;

                    art.Text = reader.GetValue(4).ToString();
                    art.Attributes.Add("class", "tabG_art donneesOF " + numOF.Text);
                    art.Attributes.Add("value", art.Text);
                    art.ID = "art" + numOF.ID;

                    qtePrevue.Text = reader.GetValue(5).ToString();
                    qtePrevue.Attributes.Add("class", "tabG_qtePrevue donneesOF " + numOF.Text);
                    qtePrevue.Attributes.Add("value", qtePrevue.Text);
                    qtePrevue.ID = "qteP" + numOF.ID;

                    qteRevue.Text = reader.GetValue(6).ToString();
                    qteRevue.Attributes.Add("class", "tabG_qteRevue donneesOF " + numOF.Text);
                    qteRevue.Attributes.Add("value", qteRevue.Text);
                    qteRevue.ID = "qteR" + numOF.ID;

                    composant.Text = reader.GetValue(7).ToString();
                    composant.Attributes.Add("class", "tabG_composant donneesOF " + numOF.Text + " " + composant.Text.Replace(" ","_"));
                    composant.Attributes.Add("value", composant.Text);
                    composant.ID = "comp" + numOF.ID;
                    composant.Attributes.Add("onClick", "onClick_cellule(\"" + composant.Text + "\",\"" + composant.Text.Replace(" ","_") + "\");");

                    restant.Text = reader.GetValue(8).ToString();
                    restant.Attributes.Add("class", "tabG_restant donneesOF " + numOF.Text);
                    restant.Attributes.Add("value", restant.Text);
                    restant.ID = "restant" + numOF.ID;

                    qteTotale.Text = reader.GetValue(9).ToString();
                    qteTotale.Attributes.Add("class", "tabG_qteTotale donneesOF " + numOF.Text);
                    qteTotale.Attributes.Add("value", qteTotale.Text);
                    qteTotale.ID = "qteT" + numOF.ID + "_1";

                    numHU.Text = reader.GetValue(10).ToString();
                    numHU.Attributes.Add("class", "tabG_numHU donneesOF " + numOF.Text + " " + numHU.Text.Replace(" ", "_"));
                    numHU.Attributes.Add("value", numHU.Text);
                    numHU.ID = "numHU" + numOF.ID + "_1";
                    numHU.Attributes.Add("onClick", "onClick_cellule(\"" + numHU.Text + "\",\"" + numHU.Text.Replace(" ","_") + "\");");

                    qteHU.Text = reader.GetValue(11).ToString();
                    qteHU.Attributes.Add("class", "tabG_qteHU donneesOF " + numOF.Text);
                    qteHU.Attributes.Add("value", qteHU.Text);
                    qteHU.ID = "qteH" + numOF.ID + "_1";

                    nouvelleLigne.Cells.Add(checkB);
                    nouvelleLigne.Cells.Add(numOF);
                    nouvelleLigne.Cells.Add(seqOF);
                    nouvelleLigne.Cells.Add(art);
                    nouvelleLigne.Cells.Add(qtePrevue);
                    nouvelleLigne.Cells.Add(qteRevue);
                    nouvelleLigne.Cells.Add(composant);
                    nouvelleLigne.Cells.Add(restant);
                    nouvelleLigne.Cells.Add(qteTotale);
                    nouvelleLigne.Cells.Add(numHU);
                    nouvelleLigne.Cells.Add(qteHU);

                    lignes.Add(nouvelleLigne);
                }



                cpt++;
            }

            for (int i = 0; i < lignes.Count; i++)
            {
                tabG.Rows.Add(lignes[i]);
            }
        }

如您所见，每个单元格都有许多属性“类”或有时“行跨度”。在这个系统中，复选框与行无关，这意味着例如，如果我选中第 3 行中的复选框并在第 2 列上进行了排序。它将始终是第 3 行上的复选框将被选中但不再对应同一行。

我想就以下问题提出建议： 你认为会有一个解决方案，我应该使用另一种方法吗？ 你知道一个可以做这件事的jquery插件吗？ 提前致谢。

Answer 1

它不是免费的，但请查看DevExpress's Gridview。它会让你的生活变得简单很多。您还可以使用其他控件库，例如 telerik、jeasyui 等。我只是碰巧使用过它们，并且以图形方式处理大量数据，这些库可以为您节省大量时间。

DevExpress 的 Grid 可以自行处理 dnd 功能，具有很好的传统选择。但是，我认为需要做一些工作才能实现您现在的选择行为。

（我认为这会自动有评论，但是嘿！猜不出来。）