私は大きな助けを必要としており、ここに誰かが同情し、私に答える時間をくれることを願っています;)。
2 週間前、私はトレーニングを受けていて、データテーブルに機能を追加しようとしています。実装には 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]);
}
}
ご覧のとおり、各セルには多くの属性「class」または場合によっては「rowspan」があります。このシステムでは、チェックボックスは行に関連していません。つまり、たとえば行 3 のチェックボックスをオンにして、列 2 で並べ替えを行った場合、行 3 のチェックボックスは常にオンになりますが、もはやチェックされません。同行に対応。
次の点についてアドバイスをお願いします。別の方法を使用する必要があると思いますか? これを実現できるjqueryプラグインを知っていますか？前もって感謝します。