Q: Why "homemade"? Isn't there a ready-made control?
A: On the ASP.net page, the listbox is eventually rendered as a SELECT element, and the Checklistbox is eventually rendered as a div or a table, making the style of the two impossible to unify or to unify.
Solve:
As a result, you decide to simply assemble some of the elements to implement the unified style of a single and multiple-selection list.
First, whether it's a radio list or a multiple-selection list, you use a border div to make a container:
<div class= "List" ></div>
Then, add the data item to the Div. To be able to traverse the data item in response to the OnClick event, and then to do some style control, I need to set the Name property of each data item to the same, and then use Getelementsbyname to get it (this way I use it in the CheckBox's full selection feature). However, after practice, found that Div, span have no Name attribute, finally found with anchor point, that is, <a> tag, can be achieved.
For example:
Copy Code code as follows:
<div id= "divdepartments" class= "List" >
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 1</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 2</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 3</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 4</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 5</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 6</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 7</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 8</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 9</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 10</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 11</a>
<a name= "ADEP" style= "width:100%" onclick= "itemclicked" (this); " > Department 12</a>
</div>
Where the list style:
Copy Code code as follows:
. List
{
Overflow-y:scroll;
width:120px;
height:150px;
padding:3px;
Border:solid 1px #AFAFAF;
Background-color: #ffffff;
Cursor:pointer;
}
The itemclicked function is used to respond to the Click event. The following code simply changes the style and continues to add the contents of the load data:
Copy Code code as follows:
function Itemclicked (a) {
A.style.backgroundcolor= "#EEEEEE";
As=document.getelementsbyname (A.name);
for (i=0;i<as.length;i++) {
if (as[i]!=a) {as[i].style.backgroundcolor= "#FFFFFF";}
}
}
A multiple-selection list with a check box is similar, but here because traversing the data item, as long as the check box is traversed, so you can use div to do data items container:
Copy Code code as follows:
<div id= "divpersons" class= "List" >
<div><input type= "checkbox"/> Personnel 1</div>
<div><input type= "checkbox"/> Personnel 2</div>
<div><input type= "checkbox"/> Personnel 3</div>
<div><input type= "checkbox"/> Personnel 4</div>
<div><input type= "checkbox"/> Personnel 5</div>
<div><input type= "checkbox"/> Personnel 6</div>
<div><input type= "checkbox"/> Personnel 7</div>
<div><input type= "checkbox"/> Personnel 8</div>
<div><input type= "checkbox"/> Personnel 9</div>
<div><input type= "checkbox"/> Personnel 10</div>
<div><input type= "checkbox"/> Personnel 11</div>
</div>
Finally, on the issue of data loading, I intend to use Ajax.updater to populate the data items in the div of the corresponding list in the current specific problem.
