第一篇其實還有一個util,一樣把它複製到前端
官網連結
※id
document.getElementById('sp1').innerHTML = rtn;
$('sp1').innerHTML = rtn;
dwr.util.byId('sp1').innerHTML = rtn;
※上一篇的getElementById因為太長了,所以官方幫我們封裝起來了,有兩種方式,都是一樣的
※這兩種方式後面是用javascript的方法,還可以用util的setValue,後面會介紹
※getText和getValue
function test(id){
alert('text=' + dwr.util.getText(id));
alert('value=' + dwr.util.getValue(id));
// alert('text=' + DWRUtil.getText('sp6'));
// alert('value=' + DWRUtil.getValue('sp6'));
}
----------
<h1 id="sp1" onclick="test(this.id)">1</h1>
<input id="sp2" value="2222222222" onclick="test(this.id)" />
<span id="sp3" onclick="test(this.id)">3</span>
<div id="sp4" onclick="test(this.id)">4</div>
<textarea rows="30" cols="5" id="sp5" onclick="test(this.id)">5</textarea>
<select id="sp6" onchange="test(this.id)">
<option value="oo">o1</option>
<option value="xx">o2</option>
<option value="zz">o3</option>
</select>
<input type="button" onclick="test(sp2)" />
※getText官網有說只能使用在下拉,我試的結果確實是這樣
※只要有屬性value,getValue都可以用,但記得要先將上面的getText註解掉,否則網頁出錯,就不會執行getValue了
※官網寫DWRUtil.getText,我試的結果不行(註解的部分),不管是getText和getValue,用dwr.util才是可以的(可能舊版本可以吧!)
※setValue
function test(id){
// dwr.util.setValue(id, '<h1>xxx</h1>');
dwr.util.setValue(id, '<h1>xxx</h1>', { escapeHtml:false });
}
※最後一個參數可以視情況加,功能是要不要忽略HTML
※addOptions和removeAllOptions
function addOption(id){
// 方法一(value和text一樣)
dwr.util.addOptions(id, ["aa", "bb", "cc"]);
// 方法二(value和text一樣,但只抓xxx)
var data = [{xxx:"aa"}, {xxx:"bb"}, {ooo:"cc"}];
dwr.util.addOptions(id, data, "xxx");
// 方法三(value和text可以不一樣,其中之一抓不到會是undefined,都抓不到不顯示)
dwr.util.addOptions(
id,
[{ooo:'a', xxx:'aa'},
{yyy:'b', zzz:'bb'},
{ooo:'c', xxx:'cc'}],
'ooo', 'xxx');
// 方法四(結果和方法一一樣)
function opt(o) {
return o;
}
dwr.util.addOptions(id, ["aa", "bb", "cc"], opt);
}
function removeAll(id){
dwr.util.removeAllOptions(id);
}
----------
<select id="sp">
<option value="oo">o1</option>
<option value="xx">o2</option>
<option value="zz">o3</option>
</select>
<input type="button" value="remove" onclick="removeAll('sp')" />
<input type="button" value="add" onclick="addOption('sp')" />
※不只有這些方法,以後有用到再研究
※從資料庫抓值後,顯示在前端的下拉
var oao;
dao.getAllChess({
callback : function getAllChessCallback(rtnList){
oao = rtnList;
// dwr.util.addOptions('sp', rtnList, 'id', 'name');
}
});
function getOptions(){
dwr.util.addOptions('sp', oao, 'id', 'name');
}
----------
<input type="button" value="add" onclick="getOptions()" />
※按下按鈕就會顯示,如果要一進頁面就顯示,就不需要oao變數了
※addRows和removeAllRows
var i = 0;
function testAddRow(){
var xxx = [
function(d){return ++i},
function(d){return d},
function(d){
return '<input type="button" value="click me" onclick="alert(\'hey\')" />';
}
];
dwr.util.setEscapeHtml(false);
dwr.util.addRows('sp', ['aaa', 'bbb'], xxx);
// dwr.util.addRows('sp', ['aaa', 'bbb'], xxx, {escapeHtml:false});
}
function testRemoveRow(){
i=0;
dwr.util.removeAllRows('sp');
}
----------
<input type="button" value="remove" onclick="testRemoveRow()" />
<input type="button" value="load" onclick="testAddRow()" />
<table id="sp">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</table>
※第二個參數表示幾筆資料,裡面的值會傳到function的d,不一定要return這個值,但又不能不寫
※selectRange
function test(){
dwr.util.selectRange("xxx", 4, 8);
}
----------
<input id="xxx" value="012345678911" onclick="test()" />
※從0開始,所以一按下會幫我們反白4567(最後的8不算),不知道這個功能要做什麼?
※onReturn
<form onsubmit="after()">
<input onkeypress="dwr.util.onReturn(event, submitFunction)"/>
<input type="submit" />
</form>
----------
function submitFunction(){
alert('submit');
}
function after(){
alert('after');
}
※按下submit時,會執行after方法;而如果在text裡面按下enter時,會執行submitFuntion方法後,再執行after方法,也就是可以攔截submit的資料