1. 程式人生 > >jquery miniui 學習筆記

jquery miniui 學習筆記

att encode attribute tab idt earch flag reat 元素

1.取組件值 傳遞form data,load發送 請求加載數據
<script type="text/JavaScript">
mini.parse();
// get grid
var grid = mini.get("grid");
var form = new mini.Form("#form");
function search() {
//取得某個id組件的 value
var rq = mini.get("yf").getValue();
if (rq ) {
// 將form 裏的參數和值傳給 grid發送的請求
grid.load(form.getData(true));
} else {
mini.alert("請選擇");
}
}
</script>

2.
confirm確定框 確定title,選項,執行方法
function cz() {
\\取得grid選中行(單選)
var row = grid1.getSelected();
if (row) {
mini.confirm("確認計算?",
"確定?",
function(action) {
\\action 選項
if (action == "ok") {
var jhzt = ‘10‘;
var flbm = mini.get("flbm").getValue();
\\ok 則發送ajax請求,執行操作
$.ajax({
url : "${pageContext.request.contextPath}/js/cz.action",
type : "POST",
data : {
flbm:flbm,
pzh:row.pzh,
jhzt:jhzt
},
success : function(text) {
mini.alert("操作成功! ");
\\重新加載數據
grid.reload();
},
error : function(text) {
mini.alert("操作失敗! ");
}
});
} else {
}
});
} else {
\\如果沒有選中任何數據,彈出消息
mini.alert("請選擇一條數據");
}
}

3. 渲染器
<div field="tjskg" name="tjskg" allowSort="true" renderer="onActionRenderer">按鈕</div>
<script type="text/javascript">
function onActionRenderer(e) {
var grid = e.sender;
var record = e.record;
var uid = record._uid;
var column = e.column;
var s = ‘ <a class="mini-button" onclick="js(\‘‘+ uid +‘\‘)">‘+e.value+‘</a>‘;
return s;
}

</script>

4.數據轉成json,提交表單
//提交表單數據
var form = new mini.Form("#form1");
var data = form.getData(); //獲取表單多個控件的數據
var json = mini.encode(data); //序列化成JSON
$.ajax({
url: "../data/FormService.aspx?method=SaveData",
type: "post",
data: { submitData: json },
success: function (text) {
alert("提交成功,返回結果:" + text);
}
});

5.json 反序列化成對象
加載表單
$.ajax({
url: "../data/FormService.aspx?method=LoadData",
type: "post",
success: function (text) {
var data = mini.decode(text); //反序列化成對象
form.setData(data); //設置多個控件數據
}
});

6.發送ajax請求, 生成table ,設置td 跨行跨列屬性
function setData(data) {
data = mini.clone(data);
var sbjgbh = data.sbjgbh;
var jsrq = data.jsrq;
var compname = data.compname;
var n = jsrq.substring(0, 4);
var y = jsrq.substring(4, 6);
$.ajax({
url : "${pageContext.request.contextPath}/jh/dd.action",
type : "POST",
data : {
sbjgbh : sbjgbh,
jsrq : jsrq
},
success : function(data) {
if (data.success == true) {
var result = data.result;
var colnamef = [ ‘zs‘, ‘mz‘, ‘zy‘, ‘cwz‘,
‘cwmz‘, ‘cwzy‘, ‘zcz‘, ‘zcmz‘, ‘zczy‘,
‘zqz‘, ‘zqmz‘, ‘zqzy‘ ];
document.getElementById("jsrq").innerHTML = "&nbsp;"
+ n + "年" + "&nbsp;" + y + "月";
document.getElementById("compname").innerHTML = " 機構(名稱):"
+ compname;
insertRowsIntoSpace( result,colnamef, "tbody1");
}
},
error : function(data) {
mini.alert("數據未能傳遞!");
}
});
}

function insertRowsIntoSpace(data,colnamef,
tablenamef) {
for ( var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
for ( var j = 0; j < colnamef.length; j++) {
var colume = document.createElement("td");
var key = colnamef[j];
var value = data[i][key];
colume.appendChild(document.createTextNode(value));
row.appendChild(colume);
}
table.appendChild(row);
}
var row = document.createElement("tr");
var colume = document.createElement("td");
colume.innerHTML = ‘備註‘;
//colume.colSpan=12;
//colume.setAttribute("rowSpan", "2");
colume.setAttribute("colSpan", "12");
colume.style.cssText="border:0px;";
row.appendChild(colume);
table.appendChild(row);
}
7.初始化界面及數據 setdata
function setData(data) {
//跨頁面傳遞的數據對象,克隆後才可以安全使用
data = mini.clone(data);
flag = data.flag;
wbwjm = data.wbwjm;
mini.get(‘flag‘).setValue(flag);
mini.get(‘wbwjm‘).setValue(wbwjm);
}

8.選中多選行,取行中某列參數值

//jQuery的push使用方法,可向數組的末尾添加一個或多個元素,並返回新的長度,

var rows = grid.getSelecteds();
if (rows.length > 0) {
if (confirm("確定刪除選中記錄?")) {
var ids = [];
for (var i = 0, l = rows.length; i < l; i++) {
var r = rows[i];


ids.push(r.id);
}

//為數組添加分隔符
var id = ids.join(‘,‘);
grid.loading("操作中,請稍後......");
$.ajax({
url: "../data/AjaxService.aspx?method=RemoveEmployees&id=" +id,
success: function (text) {
grid.reload();
},
error: function () {
}
});
}
} else {
alert("請選中一條記錄");
}

12.datagrid 顯示 帶小數的列,例如 帶兩位小數

12.1 <div field="salary" numberFormat="¥#,0.00" align="right" width="100" allowSort="true">薪資</div>
<div field="age" width="100" allowSort="true" decimalPlaces="2" dataType="float">年齡</div>

12.2 datatype="float" + numberFormat="n2"

12.3 datatype="currency"

jquery miniui 學習筆記