singleSelect : true
這兩天，一直被datagrid折磨着，不過今天基本結束了，我准備把這幾天碰到的問題和解決方法總結一下，歡迎指正。環境：jquery-easyui-1.3.2版本。
DataGrid 生成
從后台傳過來直接生成datagrid
jsp代碼：
<table id="items" ></table>
說明：只需要定義一個table，給他一個id就OK。
js代碼：
$('#items').datagrid({
url:"dataList.do",//加載的URL
title:"商品信息",
singleSelect:true,
columns:[[
{
field:'snackid',title:'商品id',align:'center',sortable:true,
formatter:function(value,row,index){
return row.snackid; }
}
});
說明：url是指從后台接收的json數據，columns里面是數據展示，formatter是規范數據的,決定數據以何種形式呈現，row代表的是后台傳過來的rows的單條數據,針對datagrid,官方文檔是這樣說的。
tips:若你想從后台傳入一個不在json數據里的數據，那你需要自己在后台定義一個key-value,類似下面：
Map<String,Object> jsonMap = new HashMap<String,Object>(); jsonMap.put("total",page.getPager().getRowCount()); jsonMap.put("kk", 111); jsonMap.put("rows", dataList);
然后在前端你只需像下面這樣寫就行：
formatter:function(value,row,index){ var d = $(this).datagrid("getData"); return d.kk; }
將table 直接渲染成datagrid
如果你想直接將table數據直接渲染成datagrid,那請參考官方文檔：http://www.jeasyui.com/tutorial/datagrid/datagrid1.php
如果你想先渲染后賦值的話，就可以使用下面的方法
html代碼
<table id="item"> <thead> <tr> <th data-options="field:'snackid',width:25,align:'center'">商品id</th> <th data-options="field:'snackname',width:25,align:'center'">商品名稱</th> <th data-options="field:'snackprice',width:25,align:'center'">商品單價</th> <th data-options="field:'salenum',width:25,align:'center',editor:{type:'numberbox'}}">商品數量</th> <th data-options="field:'saleprice',width:25,align:'center'">金額</th> </tr> </thead> </table>
js代碼
$("#item").datagrid({fitColumns:true,onClickCell: onClickCell});
說明：給每行添加onClickCell事件。
基礎操作
操作一：單元格聯動
單元格聯動指的是某一行的單元格內容發生改變，這一行的另一個單元格也要做出相應改變。例如，商品數量發生改變，商品金額應該也相應發生改變。
技術要點：首先讓某個單元格變成可編輯模式，使用editor，具體代碼見上面，然后在editor里面添加events，單元格編輯完成后，鍵入enter鍵，修改另一個單元格的文本。
js代碼：
function onClickCell(index, field) { $('#item').datagrid('selectRow', index).datagrid('beginEdit', index); var ed = $('#item').datagrid('getEditor', { index : index, field : field }); if (ed) { ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus(); } var ed = $('#item').datagrid('getEditors', index); for (var i = 0; i < ed.length; i++) { var e = ed[i]; $(e.target).bind('keyup',function() { //enter鍵的keyCode是13 if (window.event.keyCode == 13) { //修改數據 var columns = $('#item').datagrid("options").columns; var rows = $('#item').datagrid("getRows"); $('#item').datagrid('endEdit', index); rows[index][columns[0][4].field] = rows[index][columns[0][2].field]* rows[index][columns[0][3].field]; $('#item').datagrid('refreshRow', index); } }); } }
說明：寫在onClickCell事件里面，代碼寫的很清楚，自己琢磨，我就不解釋了。kk
操作二：動態添加行
說明：點擊按鈕后，動態給某個datagrid添加一行數據。
例子：將一個datagrid（A）的某一行的某一些數據轉到另一個datagrid(B)。
步驟：
1.在A中添加：
singleSelect : true,
2.給buttton事件一個onclick事件：
<a class="easyui-linkbutton" onclick="getSelected()">選擇</a>
3.實現onclick事件
function getSelected() { var rows = $('#A').datagrid('getSelections'); // $("#item").datagrid({fitColumns:true}); for (var i = 0; i <= rows.length - 1; i++) { $('#B').datagrid('insertRow', { index : i, row : { "snackid" : rows[i].id, "snackname" : rows[i].snackname, "snackprice" : rows[i].snackprice, "salenum" : 1, "saleprice" : rows[i].snackprice * 1, } }); } }
說明：使用getSelections獲得選中行，然后使用insertRow插入新的行。
操作三：動態刪除行
說明：刪除datagrid（A）的選中行
步驟：
1.在A中添加：
singleSelect : true,
2.給buttton事件一個onclick事件：
<a class="easyui-linkbutton" onclick="deleteSelected()">刪除</a>
3.實現onclick事件
function deletesnack() { var rows = $('#A').datagrid("getSelections"); for (var i = rows.length - 1; i >= 0; i--) { var index = $('#A').datagrid('getRowIndex', rows[i]); $('#A').datagrid('deleteRow', index); } }
操作四：根據某個字段篩選datagrid
說明：根據某個字段重載datagrid
步驟：
1.添加textbox和button
<label style="color: #fff;">名稱</label>
<input id="snackname" class="easyui-textbox" label="Search:" labelPosition="left">
<a class="easyui-linkbutton" onclick="searchbysnackname()">搜 索</a>
2.實現onclick事件
function searchbysnackname() { var snackname = $("#snackname").val(); if (snackname == "") { alert('請輸入名稱'); } else { $('#A').datagrid('reload', { snackname : snackname }); } }
說明：主要要使用reload
操作五：提交到后台
說明:將json數據提交到后台
步驟：
1.添加button
<a class="easyui-linkbutton" onclick="submit()">提 交</a>
2.添加onclick事件
function submit() { var roomid = $("#roomid").val(); var rows = $('#item').datagrid('getRows'); alert(rows); $.messager.confirm('確認', '確定要提交所有的數據?', function(r) { if (r) { $.ajax({ type : "post", url : 'saveBill.do', data : { json : JSON.stringify(rows), roomid : roomid }, dataType : "JSON", success : function(data, textStatus) { if (data.resultCode == 1) { showRightBottomMsg("系統提示", "提交成功！", 'slide', 5000); clearDatagridAndTree(); } else { if (data.errorType == "user") { showAlertMsg("提示", data.msg, "warning"); } else { showRightBottomMsg("系統提示", data.msg, 'slide', 5000); } } }, error : function(XMLHttpRequest, textStatus, errorThrown) { alert(textStatus + errorThrown); } }); } });
}
就這樣吧，手都寫酸了，記得點贊。