]]>
]]>
1.修改默認(rèn)的json格式為key:value
修改前
修改后
源碼修改說明
找到 if (p.dataType=='json')將其后的大括號{}內(nèi)容改為：
$.each
(
data.rows,
function(i,row)
{
var tr = document.createElement('tr');
if (i % 2 && p.striped) tr.className = 'erow';
if (row.id) tr.id = 'row' + row.id;
//by anson QQ:75526201 chents@gpcsoft.com 轉(zhuǎn)載請保留
var tdVal = [];
//給每行添加id
if (p.rowId){
$.each( data.rows[i], function(x,y){
if(p.rowId==x){tr.setAttribute('id',y);
}
})
}
if (p.colModel){
for (j=0;j<p.colModel.length;j++){
var cm = p.colModel[j];
//取列名
var seleceName = cm.name;
//json Bug修復(fù)://打包文件中未加入,請自行加入
if(typeof(data.rows[i][seleceName])=='undefined'){data.rows[i][seleceName]=''}
//過濾key
$.each( data.rows[i], function(x,y){
if(seleceName==x){tdVal.push(y)}
})
}
}
//add cell
$('thead tr:first th',g.hDiv).each
(
function ()
{
var td = document.createElement('td');
var idx = $(this).attr('axis').substr(3);
td.align = this.align;
td.innerHTML = tdVal[idx];
//td.innerHTML = row.cell[idx];
$(tr).append(td);
td = null;
}
);
if ($('thead',this.gDiv).length<1) //handle if grid has no headers
{
for (idx=0;idx<cell.length;idx++)
{
var td = document.createElement('td');
//td.innerHTML = row.cell[idx];
td.innerHTML = tdVal[idx];
$(tr).append(td);
td = null;
}
}
$(tbody).append(tr);
tr = null;
}
);
2.加入checkbox
只要設(shè)置checkbox:true即可在前面顯示多選框
源碼修改說明
a.找到 $('div:eq('+n+')',g.cDrag).css({'left':cdpos+'px'}).show();
替換為:
if (p.checkbox) {
$('div:eq('+n+')',g.cDrag).css({'left':cdpos+22+'px'}).show();
}
else{
$('div:eq('+n+')',g.cDrag).css({'left':cdpos+'px'}).show();
}
b.找到//add cell
前面插入:
//添加多選框
if (p.checkbox) {
var cth = $('<th/>');
var cthch = $('<input type="checkbox" value="' + $(tr).attr('id') +'"/>');
var objTr = $(tr);
cthch.addClass("noborder").click(function(){
if(this.checked){
objTr.addClass('trSelected');
}
else{
objTr.removeClass('trSelected');
}
})
cth.addClass("cth").attr({ width: "22"}).append(cthch);
$(tr).prepend(cth);
}
c.找到$(this).toggleClass('trSelected');
后面插入:
if(p.checkbox){
if($(this).hasClass('trSelected')){
$(this).find('input')[0].checked=true;
}
else{
$(this).find('input')[0].checked=false
}
}
d.找到if ($('th',g.hDiv).length)
在其后的{}大括號中加入
//添加多選框
if (p.checkbox) {
$('tr',g.hDiv).each(
function(){
var cth = $('<td/>');
var cthch = $('<input type="checkbox"/>');
cthch.click(function(){
if(this.checked){
$('tbody tr',g.bDiv).each(function(){
$(this).addClass('trSelected').find('input')[0].checked=true;
})
}
else{
$('tbody tr',g.bDiv).each(function(){
$(this).removeClass('trSelected').find('input')[0].checked=false;
})
}
})
cth.addClass("cth").attr({ width: "22" }).append(cthch);
$(this).prepend(cth);
})
};
e.找到p = $.extend({
添加默認(rèn)設(shè)置
rowId:'id',//綁定行的id
修改后結(jié)果
未加入多條件搜索,右鍵,打印,導(dǎo)出Excel等功能,如有需要聯(lián)系作者Anson,QQ:75526201
修改后文件下載:點擊下載附件
http://hi.baidu.com/wzjstrong/blog/item/fc64e036da94221d90ef393b.html
http://blog.csdn.net/liuzhoulong/article/details/6076071
jQuery插件flexigrid是像ext的DataGrid一樣的活動表格插件，使用它首先要引入query.js,還要引入flexigrid.js和flexigrid.css
最后上圖（用highcharts和flexigrid實現(xiàn)）：
]]>
]]>
修改一下就OK了：
]]>
]]>
詳細出處參考：http://www.jb51.net/article/19139.htm
http://www.jb51.net/article/27681.htm js 彈出層 并可以拖拽
詳細出處參考：http://www.jb51.net/article/27681.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>彈出層并可拖拽</title>
<style>
html,body{height:100%;overflow:hidden;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
center{padding-top:10px;}
button{cursor:pointer;}
#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}
#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}
h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}
h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
</style>
<script>
window.onload = function ()
{
var oWin = document.getElementById("win");
var oLay = document.getElementById("overlay");
var oBtn = document.getElementsByTagName("button")[0];
var oClose = document.getElementById("close");
var oH2 = oWin.getElementsByTagName("h2")[0];
var bDrag = false;
var disX = disY = 0;
oBtn.onclick = function ()
{
oLay.style.display = "block";
oWin.style.display = "block"
};
oClose.onclick = function ()
{
oLay.style.display = "none";
oWin.style.display = "none"
};
oClose.onmousedown = function (event)
{
(event || window.event).cancelBubble = true;
};
oH2.onmousedown = function (event)
{
var event = event || window.event;
bDrag = true;
disX = event.clientX - oWin.offsetLeft;
disY = event.clientY - oWin.offsetTop;
this.setCapture && this.setCapture();
return false
};
document.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
var maxT = document.documentElement.clientHeight - oWin.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oWin.style.marginTop = oWin.style.marginLeft = 0;
oWin.style.left = iL + "px";
oWin.style.top = iT + "px";
return false
};
document.onmouseup = window.onblur = oH2.onlosecapture = function ()
{
bDrag = false;
oH2.releaseCapture && oH2.releaseCapture();
};
};
</script>
</head>
<body>
<div id="overlay"></div>
<div id="win"><h2><span id="close">×</span></h2></div>
<center><button>彈出層</button></center>
</body>
</html>
]]>
JavaScript. API 是用于通過編程與 Web 頁面中嵌入的 XFDL 表單交互的一組工具。通過 JavaScript. API，可以把一個已存在的靜態(tài)表單轉(zhuǎn)變?yōu)榻换ナ降膭討B(tài)表單，非常容易地將 Lotus Forms 與其他應(yīng)用集成。展示在 IBM Lotus Forms Viewer 和 IBM Lotus Forms Server – Webform. Server 中的表單都可以使用 JavaScript. API 進行控制和操作。JavaScript. API 允許我們使用熟悉的 JavaScript. 工具創(chuàng)建 HTML 頁面，與現(xiàn)有的 XFDL 表單進行動態(tài)交互，使用腳本在表單中插入或修改數(shù)據(jù)以及從表單中提取數(shù)據(jù)。
可以使用 JavaScript. API 直接訪問整個表單及其所有元素節(jié)點。JavaScript. API 提供了操作表單中的輸入框等控件的功能。可以從嵌入 Web 頁面中的 XFDL 表單中提取信息，使用 JavaScript. 代碼加工處理，然后返回給同一個表單或同一個 Web 頁面中的其他表單。另外，也可以從表單中獲取數(shù)字簽名的信息，然后加以驗證或進行其他操作。
圖 1 展示了在 HTML 頁面中使用 JavaScript. API 與 XFDL 表單交互的過程。
圖 1. HTML 頁面中使用 JavaScript. API 與 XFDL 表單交互的過程
FormNodeP 對象和 XFDL 對象是 JavaScript. API 的主要組成部分，下面將對其進行詳細介紹。
表單中的每個 XFDL 元素都對應(yīng)一個 FormNodeP 對象，在加載表單的時候，代表表單本身的 FormNodeP 對象會被添加到 ibmForms 數(shù)組中。調(diào)用 JavaScript. API 的應(yīng)用可以使用 ibmForms 數(shù)組作為起點。FormNodeP 對象包含了操作和控制表單的方法。可用于添加、修改、刪除和驗證表單內(nèi)容。任何使用 FormNodeP 對象中的方法的 Web 頁面必須在腳本中包含 LF_FormNodeP.js 文件。FomNodeP 對象中的方法可以分為以下幾類：
- 事件相關(guān)的方法：JavaScript. API 支持四種事件，即 onBlur、 onChange、 onClick 和 onFocus 事件。在 FormNodeP 對象中包含了對這四類事件的處理函數(shù)注冊和注銷方法。
- 表單頁面元素及其屬性：可以使用 FormNodeP 中的方法讀取、添加和修改表單頁面元素及其屬性，例如為 combobox、list 或 popup 添加一個選項，復(fù)制或刪除一個表單頁面元素，或者操作表單中的附件等等。
- Form. instance：可以使用 FormNodeP 提供的相關(guān)方法獲取或更新 form. instance，包括 XForms instance 和 XML model。
- 數(shù)字簽名：FormNodeP 提供了用于驗證或刪除表單中的數(shù)字簽名的功能。
XFDL 對象包含從 Web 頁面中注冊和注銷表單的功能。為了使用 JavaScript. API，必須在腳本文件的開頭包含 LF_XFDL.js 文件。
XFDL 中的 registerAPIExceptionHandler 方法用于注冊處理 JavaScript. API 拋出的異常的函數(shù)。registerForm. 方法用于注冊表單，將其添加到 ibmForms 表單數(shù)組中，這樣 JavaScript. API 可以訪問該表單。deregisterForm. 方法用于注銷原來注冊的表單。調(diào)用該方法后，JavaScript. API 不可以繼續(xù)訪問該表單。
使用 JavaScript. API 創(chuàng)建與 Lotus Forms 表單交互的應(yīng)用
下面將通過一個實例展示如何使用 JavaScript. API 創(chuàng)建與 Lotus Forms 表單交互的 Web 應(yīng)用。
實例中的表單是采購系統(tǒng)中的一個簡化采購訂單表單，當(dāng)用戶選定一個商品時，表單中會自動顯示出商品的報價和生產(chǎn)廠商的名稱及圖標(biāo)；用戶添加需要采購的商品后對表單進行數(shù)字簽名；HTML 頁面獲得采購訂單的數(shù)據(jù)和數(shù)字簽名的狀態(tài)后提交到后臺進行處理。下面將列舉本實例中使用 JavaScript. API 的幾段代碼。
本文中使用的完整表單及代碼詳見下載部分，可以使用 Lotus Forms Viewer 3.5.1 或 Lotus Forms Webform. Server 3.5.1 來打開該表單。
在使用 JavaScript. API 的腳本的開頭部分，包含需要的 JavaScript. API 文件：
<SCRIPT. TYPE="text/javascript" SRC="LF_XFDL.js"></SCRIPT> <SCRIPT. TYPE="text/javascript" SRC="LF_FormNodeP.js"></SCRIPT> |
清單 2. 在加載表單后，注冊商品名稱改變事件
var theName = ibmForms["customFormName"].dereferenceEx(null, "PAGE1.LIST1",
0, FormNodeP.UFL_ITEM_REFERENCE, null);
theName.addOnChange(updatePrice);
theName.addOnChange(updateProducer);
theName.addOnChange(updateProducerIcon); |
用戶選定一個商品時，顯示商品的報價及生產(chǎn)廠商的名稱，代碼如下。
清單 3. 通過更新 Instance 中的節(jié)點更新商品的單價
function updatePrice()
{
ibmForms["customFormName"].
updateXFormsInstance(null,"instance('Generated')/wizardpage2/price",
null,"15.0", XFDL.UFL_XFORMS_UPDATE_REPLACE_TEXT)
} |
清單 4. 通過設(shè)置 XFDL 元素的值來更新生產(chǎn)廠商的名稱
function updateProducer()
{
ibmForms["customFormName"].setLiteralByRefEx(null,
"PAGE1.producer.value", 0, null, "IBM");
} |
為了顯示生產(chǎn)廠商的圖標(biāo)， 我們需要將圖標(biāo)圖片的數(shù)據(jù)以附件的形式添加到表單中，其 JavaScript. API 代碼如下。
function updateProducerIcon()
{
var pageone = ibmForms["customFormName"].dereferenceEx(null,
"PAGE1", 0, FormNodeP.UFL_PAGE_REFERENCE, null);
var imageEncode =
"H4sIAAAAAAAAC3P3dLOwTFRgUGA4xAAC////X8XwoYGh4QPDqg9A/
uxMhtAPij9ZGEGSOiACpJaBuVRi151/BmyGS1uV7t/
VKHcWKHIJ8HL+JfjGdF28zvkSWVGLZvFpgj/
6YvUUnpjyMS5JlNSxau9uDmHMsZnPt+TJqzmF3Vv0r5zeqrC1X/
vI88mLLj8wNa4U/
JaSPLvO36jWSV9AR11as7HJqL2mRkSum0uyr190sikngzUAvLfe4rAAAAA="
var encloseImage = pageone.encloseFile(imageEncode,
"base64-gzip", "image/gif", null, "DATA1");
} |
當(dāng)用戶完成采購訂單并進行數(shù)字簽名后，提交訂單，在提交訂單前，需要驗證數(shù)字簽名，如果數(shù)字簽名驗證函數(shù)的返回值為 FormNodeP.UFL_DS_OK，則表示數(shù)字簽名有效。
function verifySign()
{
var signNode = ibmForms["customFormName"]
.dereferenceEx(null, "PAGE1.SIGNATURE1", 0,
FormNodeP.UFL_ITEM_REFERENCE, null);
var ret = ibmForms["customFormName"].verifySignature(signNode, false);
return ret;
} |
該實例中使用的表單和代碼祥見附件。
有時，需要在同一個 Web 頁面中展示多個 XFDL 表單。當(dāng)在同一個 Web 頁面中同時展示多個 XFDL 表單時，如果使用 JavaScript. API 處理 XFDL 表單，需要使用表單的文件名來區(qū)分不同的表單，示例代碼如下。
if (!ibmForms["customFormName"] || !ibmForms["Form2.xfdl"] || !ibmForms["Form3.xfdl"]) {
alert("You must select a form. before you can start any tests...");
} |
在使用 Lotus Forms Javascript. API 時，有兩個發(fā)生異常的根源，一個是 JavaScript. 代碼，另一個是 Viewer 或 Webform. server 中的底層表單處理代碼。
可以使用常規(guī)的方式處理 JavaScript. 代碼錯誤。例如，保持瀏覽器的默認(rèn)行為或者使用 JavaScript. 的 try-catch 方式進行處理。
JavaScript. API 的錯誤處理機制用于處理底層表單代碼拋出的異常。這些異常可以以 JavaScript. 警告的方式顯示，或者傳遞到自定義的異常處理器。可以使用 XFDL 對象的 registerAPIExceptionHandler 方法注冊自定義的異常處理方法。自定義的異常處理方法應(yīng)該以 JavaScript. 錯誤對象 ex 做為輸入?yún)?shù) , 實例代碼如下。
function apiExceHandler(ex) {
alert("custom error handling");
alert("name: " + ex.name);
var exDesc = ex.description;
alert("description: " + exDesc);
var exMsg = ex.message
alert("message: " + exMsg);
} |
Viewer 和 Webform. Server 中實現(xiàn)的區(qū)別
很多時候，不管表單是由 Viewer 展示還是 Webform. Server，其使用 JavaScript. API 的方式是相同的。但是，有時可能需要根據(jù)選擇使用 Viewer 還是 Webform. Server 調(diào)整應(yīng)用的設(shè)計。
由于實現(xiàn)機制的不同，當(dāng)使用 Webform. Server 展示表單時，使用 JavaScript. API 的應(yīng)用可能有以下某些局限。
- Web 頁面加載：在表單沒有完全加載到瀏覽器并注冊前，不能使用 JavaScript. API。但是，瀏覽器并不能控制頁面中不同部分的加載順序，即不能保證在 JavaScript. 應(yīng)用訪問表單前表單已經(jīng)加載完成并注冊。對于這種情況，Portlet 和 Servlet 分別有其不同的解決方法。當(dāng)使用 Portlet 時，可以通過使用兩個 Portlet 來解決，一個 Portlet 用于展示 XFDL 表單，另一個 Portlet 中提供用戶控制 JavaScript. 應(yīng)用的初始化的機制。當(dāng)使用 Servlet 時，可以通過把 Web 頁面劃分成不同的 frame. 來解決。Frameset 元素的 onload 事件在所有 frame. 加載完成后發(fā)生，可以用于控制 JavaScript. 應(yīng)用的初始化。
- Web 頁面重新加載：盡管 Webform. server 中廣泛使用了 AJAX，但是某些操作仍然會引起頁面刷新，當(dāng)頁面刷新并重新加載后，JavaScript. 的狀態(tài)信息會丟失，變量值和存儲的任何其它數(shù)據(jù)都會丟失。在 Servlet 中，可以使用 HTML frame. 來處理這種局限。Portlet 中則會比較復(fù)雜。需要采取措施以在頁面重新加載時保存 JavaScript. 應(yīng)用的狀態(tài)。
本文在介紹了 Lotus Forms JavaScript. API 后，結(jié)合實例向用戶詳細地介紹了如何使用 JavaScript. API 與 XFDL 表單動態(tài)交互，進行 Lotus Forms 的二次開發(fā)以及與其他系統(tǒng)的集成。本文還總結(jié)了 Lotus Forms JavaScript. API 中的異常和錯誤處理機制。最后，文章列舉了使用 Lotus Forms Webform. Server 的 JavaScript. API 的應(yīng)用需要注意的局限及其解決方法。
原文鏈接：http://www.ibm.com/developerworks/cn/lotus/forms-javascript-api/index.html
]]>
http://hi.baidu.com/supersolon/blog/item/7a52c6562cebb9030df3e3e5.html JS實現(xiàn)區(qū)域打印，去頁眉頁腳
]]>
//此網(wǎng)頁內(nèi)容實現(xiàn)了用JS的方法進行區(qū)域打印，去除頁眉頁腳，添加控件進行預(yù)覽等功能。
]]>