Step 1.
add <zk xmlns:w="client"> tag.
Step 2.
<button label="Print">
<attribute w:name="onClick">
print(this,'group',500,800,true);//
</attribute>
</button>
Parameter group box.
1. "group" id of groupbox.
2. 500 windows height.
3. 800 windows width.
4. true for style if true style will apply otherwise style not apply.
Full Page
Print listbox with style
code
print Listbox with style:
<button label="Print">
<attribute w:name="onClick">
print(this,'box1',500,800,true);
</attribute>
</button>
<listbox id="box1" multiple="true" checkmark="true">
Print Groupbox.
code.
Print Box Area:
<button label="Print">
<attribute w:name="onClick">
print(this,'group',500,800,true);
</attribute>
</button>
<groupbox id="group" >
Print Grid.
code.
print Grid:
<button label="Print">
<attribute w:name="onClick">
print(this,'grid',500,800,true);
</attribute>
</button>
<grid id="grid">
Print Listbox without style
code.
print Listbox without style:
<button label="Print">
<attribute w:name="onClick">
print(this,'box',500,800,false);
</attribute>
</button>
<listbox id="box" multiple="true" checkmark="true">
<script><![CDATA[
function print(obj,id,height,width,style) {
DispWin = window.open('', '', 'toolbar=no,memubar=no,scrollbars=yes,status=no,width='+width+'px,height='+height+"px'");
DispWin.document.write('<html><head>');
if(style==true){
for(var i=0;i<document.styleSheets.length;i++){
if(document.styleSheets[i].href != null) {
DispWin.document.write('<link rel="stylesheet" type="text/css" href="'+document.styleSheets[i].href+'">');
}
}
}
DispWin.document.write('</head>');
DispWin.document.write('<body>');
DispWin.document.write('<p align="center"><input type="button" value="Close" onclick="window.close()"/>    <input type="button" value="Print" onclick="print()"/></p>');
DispWin.document.write($(obj.$f(id)).formhtml());
DispWin.document.write('</body></html>');
DispWin.document.close();
//DispWin.close();
//DispWin.print();
}
(function($) {
var oldHTML = $.fn.html;
$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,button", this).each(function() {
this.setAttribute('value',this.value);
this.setAttribute('readonly',true);
});
$("textarea", this).each(function() {
// updated - thanks Raja!
this.innerHTML = this.value;
});
$("input:radio,input:checkbox", this).each(function() {
// im not really even sure you need to do this for "checked"
// but what the heck, better safe than sorry
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function() {
// also not sure, but, better safe...
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
//optional to override real .html() if you want
// $.fn.html = $.fn.formhtml;
})(jQuery);
]]></script>
Print Box Area:
<button label="Print">
<attribute w:name="onClick">
print(this,'group',500,800,true);
</attribute>
</button>
<groupbox id="group" >
<caption
label="Box"
sclass="group-header"/>
print Listbox with style:
<button label="Print">
<attribute w:name="onClick">
print(this,'box1',500,800,true);
</attribute>
</button>
<listbox id="box1" multiple="true" checkmark="true">
<listhead>
<listheader label="Name" />
<listheader label="Gender" />
<listheader label="Age" />
</listhead>
<listitem>
<listcell label="Mary" />
<listcell label="FEMALE" />
<listcell label="18" />
</listitem>
<listitem>
<listcell label="John" />
<listcell label="MALE" />
<listcell label="20" />
</listitem>
<listitem>
<listcell label="Jane" />
<listcell label="FEMALE" />
<listcell label="32" />
</listitem>
<listitem>
<listcell label="Henry" />
<listcell label="MALE" />
<listcell label="29" />
</listitem>
<listitem>
<listcell label="Mark" />
<listcell label="MALE" />
<listcell label="15" />
</listitem>
</listbox>
print Listbox without style:
<button label="Print">
<attribute w:name="onClick">
print(this,'box',500,800,false);
</attribute>
</button>
<listbox id="box" multiple="true" checkmark="true">
<listhead>
<listheader label="Name" />
<listheader label="Gender" />
<listheader label="Age" />
</listhead>
<listitem>
<listcell label="Mary" />
<listcell label="FEMALE" />
<listcell label="18" />
</listitem>
<listitem>
<listcell label="John" />
<listcell label="MALE" />
<listcell label="20" />
</listitem>
<listitem>
<listcell label="Henry" />
<listcell label="MALE" />
<listcell label="29" />
</listitem>
<listitem>
<listcell label="Mark" />
<listcell label="MALE" />
<listcell label="15" />
</listitem>
<listitem>
<listcell label="Jeffery" />
<listcell label="MALE" />
<listcell label="17" />
</listitem>
</listbox>
print Grid:
<button label="Print">
<attribute w:name="onClick">
print(this,'grid',500,800,true);
</attribute>
</button>
<grid id="grid">
<auxhead>
<auxheader label="H1'07" colspan="6"/>
<auxheader label="H2'07" colspan="6"/>
</auxhead>
<auxhead>
<auxheader label="Q1" colspan="3"/>
<auxheader label="Q2" colspan="3"/>
<auxheader label="Q3" colspan="3"/>
<auxheader label="Q4" colspan="3"/>
</auxhead>
<columns>
<column label="Jan"/><column label="Feb"/><column label="Mar"/>
<column label="Apr"/><column label="May"/><column label="Jun"/>
<column label="Jul"/><column label="Aug"/><column label="Sep"/>
<column label="Oct"/><column label="Nov"/><column label="Dec"/>
</columns>
<rows>
<row>
<label value="1,000"/><label value="1,100"/><label value="1,200"/>
<label value="1,300"/><label value="1,400"/><label value="1,500"/>
<label value="1,600"/><label value="1,700"/><label value="1,800"/>
<label value="1,900"/><label value="2,000"/><label value="2,100"/>
</row>
<row>
<label value="1,500"/><label value="2,100"/><label value="1,200"/>
<label value="1,100"/><label value="2,400"/><label value="1,700"/>
<label value="1,500"/><label value="3,700"/><label value="1,800"/>
<label value="1,300"/><label value="2,000"/><label value="2,500"/>
</row>
</rows>
</grid>
</groupbox>
</zk>
add <zk xmlns:w="client"> tag.
Step 2.
<button label="Print">
<attribute w:name="onClick">
print(this,'group',500,800,true);//
</attribute>
</button>
Parameter group box.
1. "group" id of groupbox.
2. 500 windows height.
3. 800 windows width.
4. true for style if true style will apply otherwise style not apply.
Full Page
code
print Listbox with style:
<button label="Print">
<attribute w:name="onClick">
print(this,'box1',500,800,true);
</attribute>
</button>
<listbox id="box1" multiple="true" checkmark="true">
code.
Print Box Area:
<button label="Print">
<attribute w:name="onClick">
print(this,'group',500,800,true);
</attribute>
</button>
<groupbox id="group" >
code.
print Grid:
<button label="Print">
<attribute w:name="onClick">
print(this,'grid',500,800,true);
</attribute>
</button>
<grid id="grid">
code.
print Listbox without style:
<button label="Print">
<attribute w:name="onClick">
print(this,'box',500,800,false);
</attribute>
</button>
<listbox id="box" multiple="true" checkmark="true">
Full source code.
print.zul
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk xmlns:w="client"><script><![CDATA[
function print(obj,id,height,width,style) {
DispWin = window.open('', '', 'toolbar=no,memubar=no,scrollbars=yes,status=no,width='+width+'px,height='+height+"px'");
DispWin.document.write('<html><head>');
if(style==true){
for(var i=0;i<document.styleSheets.length;i++){
if(document.styleSheets[i].href != null) {
DispWin.document.write('<link rel="stylesheet" type="text/css" href="'+document.styleSheets[i].href+'">');
}
}
}
DispWin.document.write('</head>');
DispWin.document.write('<body>');
DispWin.document.write('<p align="center"><input type="button" value="Close" onclick="window.close()"/>    <input type="button" value="Print" onclick="print()"/></p>');
DispWin.document.write($(obj.$f(id)).formhtml());
DispWin.document.write('</body></html>');
DispWin.document.close();
//DispWin.close();
//DispWin.print();
}
(function($) {
var oldHTML = $.fn.html;
$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,button", this).each(function() {
this.setAttribute('value',this.value);
this.setAttribute('readonly',true);
});
$("textarea", this).each(function() {
// updated - thanks Raja!
this.innerHTML = this.value;
});
$("input:radio,input:checkbox", this).each(function() {
// im not really even sure you need to do this for "checked"
// but what the heck, better safe than sorry
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function() {
// also not sure, but, better safe...
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
//optional to override real .html() if you want
// $.fn.html = $.fn.formhtml;
})(jQuery);
]]></script>
Print Box Area:
<button label="Print">
<attribute w:name="onClick">
print(this,'group',500,800,true);
</attribute>
</button>
<groupbox id="group" >
<caption
label="Box"
sclass="group-header"/>
print Listbox with style:
<button label="Print">
<attribute w:name="onClick">
print(this,'box1',500,800,true);
</attribute>
</button>
<listbox id="box1" multiple="true" checkmark="true">
<listhead>
<listheader label="Name" />
<listheader label="Gender" />
<listheader label="Age" />
</listhead>
<listitem>
<listcell label="Mary" />
<listcell label="FEMALE" />
<listcell label="18" />
</listitem>
<listitem>
<listcell label="John" />
<listcell label="MALE" />
<listcell label="20" />
</listitem>
<listitem>
<listcell label="Jane" />
<listcell label="FEMALE" />
<listcell label="32" />
</listitem>
<listitem>
<listcell label="Henry" />
<listcell label="MALE" />
<listcell label="29" />
</listitem>
<listitem>
<listcell label="Mark" />
<listcell label="MALE" />
<listcell label="15" />
</listitem>
</listbox>
print Listbox without style:
<button label="Print">
<attribute w:name="onClick">
print(this,'box',500,800,false);
</attribute>
</button>
<listbox id="box" multiple="true" checkmark="true">
<listhead>
<listheader label="Name" />
<listheader label="Gender" />
<listheader label="Age" />
</listhead>
<listitem>
<listcell label="Mary" />
<listcell label="FEMALE" />
<listcell label="18" />
</listitem>
<listitem>
<listcell label="John" />
<listcell label="MALE" />
<listcell label="20" />
</listitem>
<listitem>
<listcell label="Henry" />
<listcell label="MALE" />
<listcell label="29" />
</listitem>
<listitem>
<listcell label="Mark" />
<listcell label="MALE" />
<listcell label="15" />
</listitem>
<listitem>
<listcell label="Jeffery" />
<listcell label="MALE" />
<listcell label="17" />
</listitem>
</listbox>
print Grid:
<button label="Print">
<attribute w:name="onClick">
print(this,'grid',500,800,true);
</attribute>
</button>
<grid id="grid">
<auxhead>
<auxheader label="H1'07" colspan="6"/>
<auxheader label="H2'07" colspan="6"/>
</auxhead>
<auxhead>
<auxheader label="Q1" colspan="3"/>
<auxheader label="Q2" colspan="3"/>
<auxheader label="Q3" colspan="3"/>
<auxheader label="Q4" colspan="3"/>
</auxhead>
<columns>
<column label="Jan"/><column label="Feb"/><column label="Mar"/>
<column label="Apr"/><column label="May"/><column label="Jun"/>
<column label="Jul"/><column label="Aug"/><column label="Sep"/>
<column label="Oct"/><column label="Nov"/><column label="Dec"/>
</columns>
<rows>
<row>
<label value="1,000"/><label value="1,100"/><label value="1,200"/>
<label value="1,300"/><label value="1,400"/><label value="1,500"/>
<label value="1,600"/><label value="1,700"/><label value="1,800"/>
<label value="1,900"/><label value="2,000"/><label value="2,100"/>
</row>
<row>
<label value="1,500"/><label value="2,100"/><label value="1,200"/>
<label value="1,100"/><label value="2,400"/><label value="1,700"/>
<label value="1,500"/><label value="3,700"/><label value="1,800"/>
<label value="1,300"/><label value="2,000"/><label value="2,500"/>
</row>
</rows>
</grid>
</groupbox>
</zk>
No comments:
Post a Comment