jquery-easyui插件中datagrid列表(可編輯)
在某一天,我靜靜的花了些時間寫了自認為一套還不錯的可編輯的datagrid列表完整版,於是乎,想做個筆記,望各位指教哦!
下面是我的小成果~~
案例功能演示圖 (個別圖稍微壓縮或拉長,望不影響閱讀)
除單機編輯按鈕外,雙擊行也可開啟編輯
一旦存在開啟編輯后,未點擊完成,則其他任何操作均不能操作,易操作就有提示
無論是單行刪除還是批量刪除,提醒必不可少
\
若去掉復選框,是依然不影響操作的哦
新增行時,在當前頁的最后一行會新增,然后可點擊(或者雙擊)編輯保存,保存后 可去最后一頁查看剛添加的記錄,也可控制列表自動跳到最后一頁記錄顯示新紀錄
新增行進行編輯
所需准備:
1.一個正常的頁面.
2.下載easy-ui插件源碼包,我此處用的是 jquery-easyui-1.4.3
3.引入資源 (可根據要引入的樣式以及js文件去源碼包中找到,其中 js引入 路徑中 jquery 是本人自創文件夾, 其它的這里就不多說了)
<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./themes/icon.css">
<script type="text/javascript" src="./jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="./jquery/jquery.min.js"></script>
<script type="text/javascript" src="./jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./jquery/easyui-lang-zh_CN.js"></script>
4.頁面所需標簽
<!-- 作為編輯標記 -->
<input type="hidden" id="editMark" value="" />
<!-- 工具欄 -->
<div id="tb">
<label>查詢條件</label> <input type="text" id="condition" name="condition" value="" />
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="searchInfo()">查找</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true" onclick="deleteInfos()">批量刪除</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="addInfo()">新增記錄</a>
</div>
<!-- Datagrid列表 -->
<table id="dg"></table>
5.開始寫js代碼了就 (空格已被抵消,為了容易看,親自手打空格哦,別介意)
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
url : '<html:url pageId="CLSCW100201" eventId="01"/>', //遠程獲取數據路徑
pagination : true,
striped: true, //行背景交換
rownumbers:true, //行號列
toolbar: '#tb',
columns : [ [
{checkbox:true, field : 'USER_ID', width: 30, align: 'center'},
// {title: '用戶ID', field : 'USER_ID', width: 100, align: 'center',editor:'text'}, //可選擇不要復選框,注掉復選框,解釋本行即可
{title: '項目名稱', field : 'PROJECT_NAME', width: 300, align: 'center',editor:'text'},
{title: '評審狀態', field : 'LAB-TEACHER', width: 100, align: 'center',editor:'combobox',
formatter: function(value,row,index){
if(value=="00"){
return "未評審";
}else if(value=="01"){
return "已評審";
}else if(value=="02"){
return "評審中";
}
}
},
{title:'編輯',field:'edit',width:120,align:'center',
formatter:function(value,row,index){
// 編輯按鈕的id屬性值即為當前行的行號,取消按鈕name屬性值為當前行的行號
return "<input type='button' id='"+index+"' value='編輯' onclick='editInfo(this)' /> "+
" <input style='display: none;' type='button' id='cancel"+index+"' name='"+index+"' value='取消' onclick='cancelEdit(this)' />";
}
},
{title:'刪除',field:'del',width:100,align:'center',
formatter:function(value,row,index){
// 刪除時,id屬性值即為要刪除的依據條件,name屬性值為當前行的行號
return "<input type='button' id='"+row.USER_ID+"' name='"+index+"' value='刪除' onclick='deleteInfo(this)' />";
}
}
] ],
onDblClickRow: function(index,row){
//獲取編輯標記
var editMark=document.getElementById('editMark').value;
//判斷是否可編輯
if(editMark==null || editMark==''){
//標記正在執行刪除
document.getElementById('editMark').value=index;
//改變編輯按鈕顯示value
document.getElementById(index).value='完成';
//編輯時顯示該行取消按鈕
document.getElementById('cancel'+index).style.display="";
//開啟編輯
$('#dg').datagrid('beginEdit', index);
}
}
});
});
//根據條件查詢
function searchInfo(){
//獲取編輯標記看是否已有在編輯項
var editMark=document.getElementById('editMark').value;
if(editMark==null || editMark==''){
// 獲取查詢條件
var condition = document.getElementById('condition').value;
alert("正在查詢------"+condition);
// 用ajax提交查詢
// $.ajax({
// url : '<html:url pageId="CLSCW100201" eventId="01"/>',
// type: "post",//提交方式
// data:condition,
// dataType: "json",
// success:function(msg){
// if(msg){
// }
// }
// });
}else{
$.messager.alert('操作警告',' 您已有的編輯項尚未完成!!!','warning');
}
};
//編輯
function editInfo(data){
//獲取編輯標記,進行檢查
var editMark=document.getElementById('editMark').value;
if(editMark==null || editMark==''){
//編輯標記為行號
document.getElementById('editMark').value=data.id;
//修改編輯按鈕顯示value為完成
data.value='完成';
//編輯時顯示該行取消按鈕
document.getElementById("cancel"+data.id).style.display='';
//開啟編輯
$('#dg').datagrid('beginEdit', data.id);
}else if(editMark!=null && editMark!='' && editMark==data.id){
//完成事編輯標記為空
document.getElementById('editMark').value='';
//此時修改完成按鈕的顯示value為編輯
data.value='編輯';
//完成后 隱藏該行取消按鈕
document.getElementById("cancel"+data.id).style.display="none";
//結束編輯
$('#dg').datagrid('endEdit', data.id);
//獲取該行編輯后的數據
var cur = $("#dg").datagrid("selectRow", data.id).datagrid("getSelected");
console.info(cur);
//用ajax提交到后台,也可根據需要先轉成json
// $.ajax({
// url : '<html:url pageId="CLSCW100201" eventId="01"/>',
// type: "post",//提交方式
// data:{}, //
// dataType: "json",
// });
//編輯完后 當前頁數據重載
//當前頁數據重載
$('#dg').datagrid('reload');
//隱藏加載狀態
$('#dg').datagrid('loaded');
}else if(editMark!=null && editMark!='' && editMark!=data.id ){
$.messager.alert('操作警告',' 您已有的編輯項尚未完成!!!','warning');
}
};
//取消編輯
function cancelEdit(data){
//清空標記
document.getElementById('editMark').value='';
//取消編輯
$('#dg').datagrid('cancelEdit', data.name);
};
//單行刪除
function deleteInfo(data){
//獲取編輯標記檢查是否有未完成的操作
var editMark=document.getElementById('editMark').value;
if(editMark==null || editMark==''){
//獲取當前行刪除依據 (此處使用userId,即為按鈕的id屬性值)
var userId=data.id;
console.info(userId);
$.messager.confirm('確認','您確認想要刪除本條記錄嗎？',function(r){
if (r){
//用ajax提交
// $.ajax({
// url : '<html:url pageId="CLSCW100201" eventId="01"/>',
// type: "post",//提交方式
// data:{'userId':userId},
// dataType: "json",
// success:function(msg){
// if(msg){
// }
// }
// });
// 刪除狀態提示消息(顯示在頂部)(可寫在ajax回調中)
$.messager.show({
title:'刪除狀態提醒',
msg:'成功刪除!!<br>本消息1秒后自動關閉。',
timeout:1000,
style:{
top:document.body.scrollTop+document.documentElement.scrollTop,
}
});
//刪除行
$('#dg').datagrid('deleteRow',data.name);
//當前頁數據重載
// $('#dg').datagrid('reload');
//隱藏加載狀態
// $('#dg').datagrid('loaded');
}
});
}else{
$.messager.alert('操作警告',' 您已有的編輯項尚未完成!!!','warning');
}
};
//批量刪除
function deleteInfos(){
//獲取編輯標記檢查是否有未完成的操作
var editMark=document.getElementById('editMark').value;
if(editMark==null || editMark==''){
//獲取所有選中行(對象數組)
var rows = $("#dg").datagrid("getSelections");
//根據選中行記錄判斷是否可執行刪除
if(rows.length>0){
console.info(rows);
// 參數轉換(1)
// 用數組保存刪除依據
// var edits=new Array();
// for(var i=0;i<rows.length;i++){
// edits[i]=rows[i].USER_ID;
// }
// console.info(edits);
// 參數轉換(2)
// 用json保存對象數組
// var edits={};
// for(var i=0;i<rows.length;i++){
// edits[i]=rows[i];
// }
// console.info(edits);
// 參數轉換(3)
// 個人覺得,根據情況而定,我此處數組對象到后台反序列化比較麻煩,
// 而且我所需依據條件只是id,所以我用拼接成字符串傳遞,以'_'連接
var edits='';
for(var i=0;i<rows.length;i++){
edits=edits+'_'+rows[i].USER_ID;
}
console.info(edits);
//刪除提醒
$.messager.confirm('確認',"您確認想要刪除已選中的 "+rows.length+" 條記錄嗎？",function(r){
if (r){
// 用ajax提交刪除條件到后台
// $.ajax({
// url : '<html:url pageId="CLSCW100201" eventId="00"/>',
// type: "post",//提交方式
// // traditional:true;//阻止深度序列化(次是在datatype未指定為json時使用)
// dataType: "json",
// data:{'editInfo':edits}, //傳遞參數
// success:function(msg){
// if(msg){
// 刪除提醒
// }
// }
// });
// 刪除提醒
$.messager.show({
title:'刪除狀態提醒',
msg:'成功刪除!!<br>本消息1秒后自動關閉。',
timeout:1000,
style:{
top:document.body.scrollTop+document.documentElement.scrollTop,
}
});
//當前頁數據重載
$('#dg').datagrid('reload');
//隱藏加載狀態
$('#dg').datagrid('loaded');
}
});
}else{
$.messager.alert("刪除操作提醒"," 請先單擊選擇要刪除的數據記錄再操作!","info");
}
}else{
$.messager.alert('操作警告',' 您已有的編輯項尚未完成!!!','warning');
}
};
//新增記錄
function addInfo(){
//獲取編輯標記檢查是否有未完成的操作
var editMark=document.getElementById('editMark').value;
if(editMark==null || editMark==''){
// 列表新增行,並提示編輯
var index=$('#dg').datagrid('appendRow', {
'PROJECT_NAME':'------------請編輯------------',
'LAB-TEACHER':'01'
}).datagrid('getRows').length-1;
//開啟本行編輯
$('#dg').datagrid('beginEdit',index)
//標記編輯
document.getElementById('editMark').value=index;
//修改編輯按鈕顯示value為完成
document.getElementById(index).value='完成';
//編輯時顯示該行取消按鈕
document.getElementById("cancel"+index).style.display='';
}else{
$.messager.alert('操作警告',' 您已有的編輯項尚未完成!!!','warning');
}
};
// 到此為止,整個編輯完成了
希望各位多多指教,也希望能給一些同我一樣的 有那個需要的 同胞盡微薄之力