The general single data selection can be implemented using the DropDownList control, but it is best to select the TreeView control for multiple selective inputs and to enter hierarchical content.
This article describes how to use the TreeView control to effectively get input from a user, which involves cascading selection of the TreeView control, removing the node HTML link to the expand directory, getting the selection, how to construct the database information into the tree content, and pop-up window usage. This article input application level examples, hope to be able to make a mark, to oneself to person, all is positive! ^_^
This article's business scope is one can enter the classification and the detailed child content, because the content is numerous, moreover has the certain stratification relation, therefore, is not suitable to adopt the DropDownList and the CheckBoxList control, Therefore, the TreeView control with the CheckBox property is used to assist the user's input.
The input interface is roughly as follows, the user selects the button, triggers the pop-up dialog box, and places the TreeView Control in the dialog box.
In the pop-up dialog box, the TreeView control placed, one with a checkbox, can be user-friendly, with cascading (through JavaScript implementations, reducing post postbacks), and because of the more content, I set the level of the expanded hierarchy.
By selecting or choosing a large class, users can select or reverse all items under their list, or select subprojects individually.
Because it is not good to get and assemble the returned content through JavaScript, this article processes the return value by traversing the tree in the background, and then binds the return value in the JavaScript of the parent form so that it displays the contents of the specified format in the interface control.
The following code for HTML, where ontreenodechecked is a cascading JavaScript function, submitvalue the action that binds the return value.
Code
Copy Code code as follows:
<div class= "Search" >
<span>
<asp:imagebutton id= "Btnselect" runat= "Server"
Imageurl= "~/themes/default/btn_select.gif" onclick= "Btnselect_click"
/>
<asp:imagebutton id= "btnclose" runat= "Server" onclientclick= "Javascript:window.close" ();
Imageurl= "~/themes/default/btn_close.gif"/>
</span>
<table cellspacing= "0" cellpadding= "0" border= "0" width= "100%" >
<tr>
<TD class= "ico" >
</td>
<TD class= "Form" >
<asp:treeview id= "TreeView1" runat= "Server" onclick= "ontreenodechecked" (); " Showcheckboxes= "All"
Showlines= "True" expanddepth= "1" font-bold= "False" forecolor= "#0000CC" >
</asp:TreeView>
</td>
</tr>
</table>
</div>
<script language= ' javascript ' type= ' Text/javascript ' >
function ontreenodechecked () {
var ele = event.srcelement;
if (Ele.type = = ' checkbox ') {
var childrendivid = ele.id.replace (' CheckBox ', ' Nodes ');
var div = document.getElementById (childrendivid);
if (div = = null) return;
var checkboxs = div.getelementsbytagname (' INPUT ');
for (var i = 0; i < checkboxs.length; i++) {
if (Checkboxs[i].type = = ' checkbox ')
checkboxs[i].checked = ele.checked;
}
}
}
function Submitvalue () {
var val = "";
var returnval = new Array ();
var inputs = Document.all.tags ("INPUT");
var n = 0;
for (var i = 0; i < inputs.length i++)//traverse all input on the page
{
if (Inputs[i].type = = "checkbox") {
if (inputs[i].checked) {
var strvalue = Inputs[i].value;
Val + + strvalue + ', ';
Returnval[n] = val;
n = n + 1;
}
}//if (inputs[i].type= "checkbox")
}//for
Window.returnvalue = val;
Window.close ();
}
</script>
The following code is the background code for the page, which shows how to bind the tree so that it can display the content in a hierarchical format, where Addtreenode is a recursive function. The Btnselect_click event handler functions to assemble the returned data and display it to the client's control input in a certain format.
Code
Copy Code code as follows:
protected void Page_Load (object sender, EventArgs e)
{
if (!this. IsPostBack)
{
Binddata ();
}
}
private void Binddata ()
{
ArrayList scopetree = Bllfactory<businessscope>. Instance.gettree ();
foreach (Businessscopenodeinfo nodeinfo in Scopetree)
{
TreeNode node = new TreeNode (nodeinfo.name);
Node. SelectAction = Treenodeselectaction.expand;
This. TREEVIEW1.NODES.ADD (node);
Addtreenode (node, nodeinfo);
}
}
private void Addtreenode (TreeNode parentnode, Businessscopenodeinfo nodeinfo)
{
TreeNode TreeNode = null;
foreach (Businessscopenodeinfo subnodeinfo in Nodeinfo.children)
{
TreeNode = new TreeNode (subnodeinfo.name);
Treenode.selectaction = Treenodeselectaction.expand;
PARENTNODE.CHILDNODES.ADD (TreeNode);
Addtreenode (TreeNode, subnodeinfo);
}
}
protected void Btnselect_click (object sender, ImageClickEventArgs e)
{
string result = "";
foreach (TreeNode parent in this. Treeview1.nodes)
{
foreach (TreeNode node in parent. ChildNodes)
{
StringBuilder sb = new StringBuilder ();
foreach (TreeNode subnode in node. ChildNodes)
{
if (subnode.checked)
{
Sb. AppendFormat ("{0},", Subnode.text);
}
}
if (sb.) Length > 0)
{
Sb. Insert (0, String. Format (' {0} (', node. Text));
Sb. Append (")");
result = sb. ToString (). Replace (",)", ")" + ";";
}
else if (node. Checked)
{
result = node. Text;
}
}
}
Helper.closewin (this, result. Trim (';'));
}
The number of data assembly is also a need to pay attention to a place, in order to improve efficiency and avoid frequent lookup of the database, we first put the eligible data into the DataTable, and then through the object select in memory to find, so that it can improve the search efficiency of recursive functions.
Code
Copy Code code as follows:
<summary>
Get the Data tree
</summary>
<returns></returns>
Public ArrayList Gettree ()
{
ArrayList Arrreturn = new ArrayList ();
String sql = string. Format ("select * from {0} ' ORDER by PID, Seq", TableName);
Database db = Databasefactory.createdatabase ();
DbCommand cmdwrapper = db. Getsqlstringcommand (SQL);
DataSet ds = db. ExecuteDataset (Cmdwrapper);
if (ds. Tables.count > 0)
{
DataTable dt = ds. Tables[0];
datarow[] DataRows = dt. Select (String. Format ("PID = {0}",-1));
for (int i = 0; i < datarows.length; i++)
{
int id = Convert.ToInt32 (datarows[i]["id"]);
Businessscopenodeinfo Menunodeinfo = getnode (ID, DT);
Arrreturn.add (Menunodeinfo);
}
}
return arrreturn;
}
Private Businessscopenodeinfo getnode (int id, DataTable DT)
{
Businessscopeinfo Menuinfo = this. FindByID (ID);
Businessscopenodeinfo menunodeinfo = new Businessscopenodeinfo (menuinfo);
datarow[] dchildrows = dt. Select (String. Format ("pid={0}", id));
for (int i = 0; i < dchildrows.length; i++)
{
int childid = Convert.ToInt32 (dchildrows[i]["ID"]);
Businessscopenodeinfo childnodeinfo = getnode (childid, DT);
MENUNODEINFO.CHILDREN.ADD (Childnodeinfo);
}
return menunodeinfo;
}
The data entities used are shown in the following two classes, where Businessscopenodeinfo is a further encapsulation of the object Businessscopeinfo to provide basic information about the tree, namely Businessscopenodeinfo is an object that contains subclass data, Businessscopeinfo is just a mapping entity for database objects.
Code
Copy Code code as follows:
<summary>
Summary description of the businessscopenodeinfo.
</summary>
public class Businessscopenodeinfo:businessscopeinfo
{
Private ArrayList M_children = new ArrayList ();
<summary>
Child Menu entity Class object Collection
</summary>
Public ArrayList Children
{
get {return m_children;}
set {M_children = value;}
}
Public Businessscopenodeinfo ()
{
This.m_children = new ArrayList ();
}
Public Businessscopenodeinfo (Businessscopeinfo scopeinfo)
{
Base. Id = scopeinfo.id;
Base. Name = Scopeinfo.name;
Base. Seq = Scopeinfo.seq;
}
}
Code
Copy Code code as follows:
[Serializable]
public class Businessscopeinfo:baseentity
{
#region Field Members
Private decimal m_id = 0;
Private decimal m_pid =-1;
private string m_name = "";
private string m_seq = "";
#endregion
#region Members
Public virtual Decimal Id
{
Get
{
return this.m_id;
}
Set
{
this.m_id = value;
}
}
Public virtual Decimal Pid
{
Get
{
return this.m_pid;
}
Set
{
This.m_pid = value;
}
}
Public virtual String Name
{
Get
{
return this.m_name;
}
Set
{
This.m_name = value;
}
}
Public virtual String Seq
{
Get
{
return this.m_seq;
}
Set
{
This.m_seq = value;
}
}
#endregion
}
The data format is roughly as follows (the example in this article is working in an Oracle environment), but SQL Server or other databases are the same.
Main research techniques: Code generation tools, Visio two development
Reprint please indicate the source:
Author: Wu Huacong
