Bootstrap Table 是一個自動表格元件，網站有豐富的資訊可惜很難找到 server side paging 的細節，簡單的說明如下：
當前台頁面有切換的動作時，Bootstrap Table 會傳送下列參數給設定好的 server url
limit -> 回傳的資料筆數
offset -> 從第幾筆資料開始取回
order -> 排序
後台接到參數後必須回傳一個包含 2 個 key 的 json object
rows -> 回傳的資料 array
total -> 全部資料筆數
(No Ratings Yet)
Loading...
判斷單一 checkbox 是否被勾選
$(“#mycheckbox”).is(“:checked”)
多個 checkbox, 取得已勾選的 checkbox 數
$(“input[name=mycheckbox]:checked”).length
勾選所有 checkbox
$(“input[name=mycheckbox]”).each(function() {
this.checked=true;
});
多個 radio, 取得已勾選的 radio 值
$(“input[name=newsLang]:checked”).val()
勾選值為 1 的 radio
$(“input[name=myradio]”).filter(“[value=1]”).attr(‘checked’, true);
(No Ratings Yet)Loading...
簡單記錄 struts2 + json plugin 的 AJAX 寫法
1. 在 struts2 的 xml 檔加入以下 json 設定
<package name=”json” namespace=”/json” extends=”json-default”>
<action name=”getCustomer” class=”com.amjet.web.action.JsonAction” method=”getCustomer”>
<result name=”success” type=”json”>
<param name=”root”>response</param>
</result>
</action>
</package>
2. json action 內放一個 property response, 例如
private Map<String,Object> response;
加上 getter, setter, 回傳 ajax response
3. json action method
public String getCustomer() {
response=new HashMap<String,Object>();
response.put(“info”,<customer info>);
return SUCCESS;
}
4. 頁面接取 json 資料
function doQuery() {
$.ajax({
url: ‘<s:url action=”getCustomer” namespace=”/json”/>’,
type: ‘POST’,
dataType: ‘json’,
data: { id_no: id_no },
success: function(data,status,xhr) {
*** your handler here ***
}
});
}
(No Ratings Yet)Loading...
首先要定義一個 datatables 的元件如下：
<table id=”myTable”>
<thead></thead>
<tbody></tbody>
</table>
DWR 比較尷尬的是一般 Ajax 元件都是要你提供一個 URL 他自己會去抓 json 格式資料回來，DWR 沒辦法提供你這樣的 URL，他是直接回傳 javascript 物件給你，幸好 datatables 也可以拿 javascript 物件資料來用。
首先 initialize datatable
$(document).ready(function() {
$(‘#myTable’).dataTable( {
aoColumns: [
{sTitle: “用戶”},
{sTitle: “電話”}
]
} );
} );
再來把 callback 收到的資料塞進 datatable 即可
myDWRInterface.query( {
callback: function(result) {
var dt=$(‘#myTable’).dataTable();
dt.fnClearTable();
dt.fnAddData(result,true);
}
});
(No Ratings Yet)Loading...
取得一組 radio 的值
$(“input[name=’myradio’]:checked”).val()
動態組成一個 select
$(“#myselect”).html(“”);
for (var i = 0; i < selectOptions.length; i++) {
$(“#myselect”).append($(“<option></option>”).val(selectOptions[i]).html(selectOptions[i]));
}
存取 select 的每一個 option
$(‘#myselect option’).each(function (i,v) {
}
將文字輸入欄位設定為唯讀
$(‘#myinput’).attr(“readonly”,true);
顯示 html 元件
$(‘#mytable’).show
隱藏 html 元件
$(‘#mybutton’).hide()
勾選一個 checkbox
$(‘#mycheckbox’).attr(“checked”,true);
接下來這個就有點離題了，我都不知道 <p> tag 可以用來印表時換頁，看到了順便記一下
<p style=’page-break-after:always’>
(No Ratings Yet)Loading...