We have to write a client's special effects, to write a day or two of JavaScript, and then debug a day or two, before you can see the clue. Now all we have to do is use jquery and his plugin to implement the special effects in our minds, and to thank their authors for their contributions to humanity (100 of tomatoes are smashed ...). ）。
The requirement that I realize today is that you need to select a column from the list page that you want to export to Word. Then, when you export the contents of the selected columns to Word, and to increase versatility, the number of columns is not fixed, which means that the table may be 4 columns or 5 columns, and the number of columns to be selected is not fixed. For example: There is a table below, and then we want to print out the other columns except the salary.
Name |
Age |
Gender |
Salary |
| Tom |
19 |
Man |
10000 |
| Tom |
19 |
Man |
10000 |
| Tom |
19 |
Man |
10000 |
My design is to use the background code loop the table header, composed of the following string
1-name--2-age--3-sex--4-salary, store this string in HiddenField, then read by JavaScript, adding the checkbox's HTML to the pop-up div dynamically.
Then, after selection, the selected values are composed of the corresponding strings, for example: Select Name, Age, Sex, compose, 1-name--2-age--3sex, in another HiddenField, read the selected string in the background code, Export the corresponding columns in the table to Word.
Also in order to make this pop-up page can be dragged, use the easydrag jQuery Plugin, which can be from http://fromvega.com/wordpress/2007/07/14/ easydrag-jquery-plugin/ Download.
This plugin is very easy to use, but also very simple,
Implement the drag effect.
Copy Code code as follows:
$ (document). Ready (function ()
{
$ ("#divPanel"). Easydrag ();
}
);
Html Code
Copy Code code as follows:
<div id= "Divpanel" style= width:300px;height:300px;background:white;border:1px solid #000000;p Osition:absolute; left:5px;top:50px ">
<div id= "divtitle" style= "Width:100%;height:25px;background:lavender" >
Title
</div>
<div style= "width:100%" >
</div>
</div>
Easydrag can also specify the area that can be dragged, such as the whole div can only be dragged through the title, we JS write
Copy Code code as follows:
$ (document). Ready (function ()
{
$ ("#divPanel"). Easydrag ();
$ ("#divPanel"). SetHandler ("divtitle");
}
);
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>new Web project</title>
<style type= "Text/css" >
. pop-box {
z-index:9999;
margin-bottom:3px;
Display:none;
Position:absolute;
Background: #ffffff;
Border:solid 1px #6e8bde;
}
. Pop-box h4{
Color: #ffffff;
Cursor:default;
height:18px;
font-size:14px;
Font-weight:bold;
Text-align:left;
padding-left:8px;
padding-top:4px;
padding-bottom:2px;
}
. pop-box-body{
Clear:both;
margin:4px;
padding:2px;
}
</style>
<script type= "Text/javascript" src= "Script/jquery.js" >
</script>
<script type= "Text/javascript" src= "Script/jquery.easydrag.js" ></script>
<script typ= "Text/javascript" >
$ (document). Ready (function () {
var text = "1-name--2-age--3-sex--4-salary";
var tokengroup = new Array ();
Tokengroup = Text.split ("--");
$ (". Optiondiv"). Append ("<fieldset class= ' fieldset1 ' ><legend class= ' legend1 ' > Options 夋 Hannah ' The flaw 佸 鍑 coax lang word Juan 殑?/ Legend></fieldset> ");
var obj = new Object ();
for (obj in Tokengroup) {
alert (obj);
Alert (number (obj));
var index = number (obj) + 1;
alert (index);
var token = new Object ();
Token.value = Tokengroup[obj].split ("-") [0];
Token.text = Tokengroup[obj].split ("-") [1];
Alert ("Value:" +token.value+ "text:" +token.text);
if (index = = 1) {
$ (". Legend1"). After ("<input id= ' Checkbox" +
Index.tostring () +
"' value= '" +
Token.value +
"' Type= ' checkbox '/><label for= ' checkbox ' +
Index.tostring () +
"' >" +
Token.text +
"</label><br>");
}
else {
$ (". Fieldset1"). Append ("<input id= ' Checkbox" +
Index.tostring () +
"' value= '" +
Token.value +
"' Type= ' checkbox '/><label for= ' checkbox ' +
Index.tostring () +
"' >" +
Token.text +
"</label><br>");
}
}
});
$ (document). Ready (function () {
$ (". Btnselect"). Click (function () {
var select = "";
$ (". Fieldset1 input"). each (function (i) {
if (this.checked) {
if (select = = "")
select = (i + 1). ToString () + "-" + $ (this). Next (). text ();
Else
Select + = "--" + (i + 1). ToString () + "-" + $ (this). Next (). text ();
}
});
$ (". Selected"). val (select);
});
$ ("#btnClose"). Click (function () {
var select = "";
$ (". Fieldset1 input"). each (function (i) {
if (this.checked) {
if (select = = "")
select = (i + 1). ToString () + "-" + $ (this). Next (). text ();
Else
Select + = "--" + (i + 1). ToString () + "-" + $ (this). Next (). text ();
}
});
$ (". Selected"). val (select);
});
});
$ (document). Ready (function () {
$ (". Pop-box"). Easydrag ();
});
function LoadText () {
var text = $ (". Hiddenfield1"). Val ();
var tokengroup = new Array ();
Tokengroup = Text.split ("--");
$ (". Pop-box-body"). HTML ("");
$ (". Pop-box-body"). Append ("<fieldset class= ' fieldset1 ' ><legend class= ' legend1 ' > Options 夋 Hannah ' The flaw 佸 鍑 coax lang word Juan 殑?/ Legend></fieldset> ");
var obj = new Object ();
for (obj in Tokengroup) {
alert (obj);
Alert (number (obj));
var index = number (obj) + 1;
alert (index);
var token = new Object ();
Token.value = Tokengroup[obj].split ("-") [0];
Token.text = Tokengroup[obj].split ("-") [1];
Alert ("Value:" +token.value+ "text:" +token.text);
if (index = = 1) {
$ (". Legend1"). After ("<input id= ' Checkbox" +
Index.tostring () +
"' value= '" +
Token.value +
"' Type= ' checkbox '/><label for= ' checkbox ' +
Index.tostring () +
"' >" +
Token.text +
"</label><br>");
}
else {
$ (". Fieldset1"). Append ("<input id= ' Checkbox" +
Index.tostring () +
"' value= '" +
Token.value +
"' Type= ' checkbox '/><label for= ' checkbox ' +
Index.tostring () +
"' >" +
Token.text +
"</label><br>");
}
}
}
function Popupdiv (div_id) {
var div_obj=$ ("#" +div_id);
var windowwidth=document.documentelement.clientwidth;
var windowheight=document.documentelement.clientheight;
var popupheight=div_obj.height ();
var popupwidth=div_obj.width ();
$ ("<div id= ' mask ' ></div>"). AddClass ("Mask"). Width (windowwidth*0.99)
. Height (windowheight*0.99). Click (function () {
Hidediv (div_id);
}). Appendto ("Body"). FadeIn (200);
Div_obj.css ({"position": "Absolute"})
. Animate ({left:windowwidth/2-popupwidth/2,top:windowheight/2-popupheight/2,opacity: "Show"}, "show");
LoadText ();
}
function Hidediv (div_id) {
$ ("#mask"). Remove ();
$ ("#" +div_id). Animate ({left:0,top:0,opacity: "Hide"}, "slow");
}
</script>
<body>
<input class= "Hiddenfield1" type= "hidden" value= "1-name--2-age--3-sex--4-salary" >
<input type= "button" id= "Btnpopup" name= "Btnpopup" onclick= "Popupdiv (' Pop-div ')" class= "Btnpopup" value= "PopupDiv ">
<div class= "Pop-box" style= "width:300px" id= "Pop-div" >
<div class= "Pop-box-body" >
<p></p>
</div>
<div class= "Butonpanel" style= "text-align:right;" >
<input value= "Close" id= "Btnclose" onclick= "Hidediv (' Pop-div ');" type= "button" >
</div>
</div>
<!--<div class= "Optiondiv" ></div>-->
<fieldset>
<legend>
</legend>
</fieldset>
<input type= "button" id= "Button1" Name= "Button1" class= "Btnselect" value= "selected" >
<br>
<textarea class= "Selected" rows= "5" cols= "M" >
</textarea>
</body>
Source code Download
