Util (DWR 三)

第一篇其實還有一個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的資料