EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
// 獲取選中一行的情況,下面的一個參數可以代表一個DataGrid
function getSelected(dialogEle,dataFileTextEle) {
// 獲取選中一行的情況。
var datagrid = $("#fileInfoDataGrid").datagrid('getSelected');
if (datagrid == null) {
$.messager.alert('提示窗口','對不起,您還沒有選擇文件!','info');
} else {
if (datagrid.fileType == "文件夾") {
$.messager.alert('提示窗口','對不起,您選擇的是文件夾,請您選擇確切的文件!','info');
} else {
// 給這個文本域賦值
dataFileTextEle.attr("value", datagrid.filePath);
replaceExistedString(dataFileTextEle.attr("id"),dataFileTextEle.val());
dialogEle.dialog("close");
}
}
}
// 獲取選中多行的情況
function getSelections() {
var ids = [];
var rows = $("#fileInfoDataGrid").datagrid('getSelections');
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].filePath);
}
}
// 選中指定行
function selectRow(rowNum) {
$("#fileInfoDataGrid").datagrid('selectRow', rowNum);
}
// 不選中指定行
function unselectRow(rowNum) {
$("#fileInfoDataGrid").datagrid('unselectRow', rowNum);
}
function clearSelections() {
$("#fileInfoDataGrid").datagrid('clearSelections');
}
//定義要填寫路徑的文本域
var dataFileTextEle;
$(function() {
$("#dialog-diskFileInfo").dialog({
resizable : false,
width : 1020,
modal : true,
show : "blind",
hide : "explode",
closeOnEscape : true,
autoOpen : false,
//draggable : true,
buttons : {
"確定" : function() {
getSelected($(this),dataFileTextEle);
},
"取消" : function() {
$(this).dialog("close");
}
}
});
// 帶有class屬性為openDiskFileInfoDialog的元素,為這個元素添加點擊事件
$(".openDiskFileInfoDialog").bind("click", function() {
//dataFileTextEle = $($(this).attr("id"));
dataFileTextEle = $($(this).attr("id"));
// 加載數據
$("#diskFileStructureTree").tree({
checkbox : false,
url : basePath + "/onlinegraph/treeDataAction_treeNodes.action",
method : 'post',
animate : true,
dnd : true,
lines : true,
onClick : function(node) {
$("#fileInfoDataGrid").datagrid('load', {
page : 1,
rows : 10,
path : node.id
});
},
onBeforeExpand : function(node, param) {
$("#diskFileStructureTree").tree('options').url = basePath
+ "/onlinegraph/treeDataAction_treeNodeList.action?path="
+ node.id;
}
});
// 打開表格
$("#fileInfoDataGrid").datagrid({
// 通過這個獲得參數
url : basePath
+ "/onlinegraph/fileInfoAction_folderFileInfoList.action",
// 行陰影,但目前看沒有效果
striped : true,
method : 'post',
nowrap : false,
border : false,
singleSelect : true,
// 自適應窗口大小變化
fit : true,
title : '文件信息',
fitColumns : true,
rownumbers : true,
idField : 'filePath',
collapsible : true,
sortName : 'fileName',
// 排序規則
sortOrder : 'desc',
// 本地排序,不是在服務器端排
remoteSort : false,
frozenColumns : [[{
field : 'checkbox',
checkbox : true
}]],
columns : [[{
field : 'fileName',
title : '名稱',
sortable : true,
width : 50
}, {
field : 'filePath',
title : '文件路徑',
sortable : true,
width : 160
}, {
field : 'lastModified',
title : '修改日期',
sortable : true,
width : 100
}, {
field : 'fileType',
title : '類型',
sortable : true,
width : 50,
align : 'left'
}, {
field : 'fileSize',
title : '大小',
sortable : true,
width : 50,
align : 'left'
}]],
// 事件調用的方式
onLoadSuccess : function() {
},
onDblClickRow : function(index, row) {
if (row.fileType == "文件夾") {
$.messager.alert('提示窗口','對不起,您選擇的是文件夾,請您選擇確切的文件!','info');
} else {
// 給這個文本域賦值
dataFileTextEle.attr("value", row.filePath);
replaceExistedString(dataFileTextEle.attr("id"),dataFileTextEle.val());
$("#dialog-diskFileInfo").dialog("close");
console.info(params);
}
},
pagination : true
});
var p = $("#fileInfoDataGrid").datagrid('getPager');
$(p).pagination({
pageSize : 10,
pageList : [10, 20, 30, 40, 50, 100],
layout:['list','sep','first','prev','links','next','last','sep','refresh'],
beforePageText : '第',
afterPageText : '頁 ?共{pages}頁',
displayMsg : '當前顯示 {from} - {to} 條記錄 ? 共 {total} 條記錄',
showPageList : true,
showRefresh : true
});
$("#dialog-diskFileInfo").show().dialog("open");
});
// 插件的第一個參數表示的是彈出的dialog元素
// $.fn.diskFileDialogEleBtnCheckOk = function(dialogEle,
// diskFileStructureTree, fileInfoDataGrid) {
//
// // 獲得選中列
// getSelected(dialogEle);
//
// // 獲取選中多行的信息
// // getSelections();
//
// // 選中第二行
// // selectRow(2);
//
// // 不選中第三行
// // unselectRow(2);
//
// // 清除所有的選中行
// // clearSelections();
// }
function getSelected(dialogEle,dataFileTextEle) {
// 獲取選中一行的情況。
var datagrid = $("#fileInfoDataGrid").datagrid('getSelected');
if (datagrid == null) {
$.messager.alert('提示窗口','對不起,您還沒有選擇文件!','info');
} else {
if (datagrid.fileType == "文件夾") {
$.messager.alert('提示窗口','對不起,您選擇的是文件夾,請您選擇確切的文件!','info');
} else {
// 給這個文本域賦值
dataFileTextEle.attr("value", datagrid.filePath);
replaceExistedString(dataFileTextEle.attr("id"),dataFileTextEle.val());
dialogEle.dialog("close");
}
}
}
// 獲取選中多行的情況
function getSelections() {
var ids = [];
var rows = $("#fileInfoDataGrid").datagrid('getSelections');
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].filePath);
}
}
// 選中指定行
function selectRow(rowNum) {
$("#fileInfoDataGrid").datagrid('selectRow', rowNum);
}
// 不選中指定行
function unselectRow(rowNum) {
$("#fileInfoDataGrid").datagrid('unselectRow', rowNum);
}
function clearSelections() {
$("#fileInfoDataGrid").datagrid('clearSelections');
}
//定義要填寫路徑的文本域
var dataFileTextEle;
$(function() {
$("#dialog-diskFileInfo").dialog({
resizable : false,
width : 1020,
modal : true,
show : "blind",
hide : "explode",
closeOnEscape : true,
autoOpen : false,
//draggable : true,
buttons : {
"確定" : function() {
getSelected($(this),dataFileTextEle);
},
"取消" : function() {
$(this).dialog("close");
}
}
});
// 帶有class屬性為openDiskFileInfoDialog的元素,為這個元素添加點擊事件
$(".openDiskFileInfoDialog").bind("click", function() {
//dataFileTextEle = $($(this).attr("id"));
dataFileTextEle = $($(this).attr("id"));
// 加載數據
$("#diskFileStructureTree").tree({
checkbox : false,
url : basePath + "/onlinegraph/treeDataAction_treeNodes.action",
method : 'post',
animate : true,
dnd : true,
lines : true,
onClick : function(node) {
$("#fileInfoDataGrid").datagrid('load', {
page : 1,
rows : 10,
path : node.id
});
},
onBeforeExpand : function(node, param) {
$("#diskFileStructureTree").tree('options').url = basePath
+ "/onlinegraph/treeDataAction_treeNodeList.action?path="
+ node.id;
}
});
// 打開表格
$("#fileInfoDataGrid").datagrid({
// 通過這個獲得參數
url : basePath
+ "/onlinegraph/fileInfoAction_folderFileInfoList.action",
// 行陰影,但目前看沒有效果
striped : true,
method : 'post',
nowrap : false,
border : false,
singleSelect : true,
// 自適應窗口大小變化
fit : true,
title : '文件信息',
fitColumns : true,
rownumbers : true,
idField : 'filePath',
collapsible : true,
sortName : 'fileName',
// 排序規則
sortOrder : 'desc',
// 本地排序,不是在服務器端排
remoteSort : false,
frozenColumns : [[{
field : 'checkbox',
checkbox : true
}]],
columns : [[{
field : 'fileName',
title : '名稱',
sortable : true,
width : 50
}, {
field : 'filePath',
title : '文件路徑',
sortable : true,
width : 160
}, {
field : 'lastModified',
title : '修改日期',
sortable : true,
width : 100
}, {
field : 'fileType',
title : '類型',
sortable : true,
width : 50,
align : 'left'
}, {
field : 'fileSize',
title : '大小',
sortable : true,
width : 50,
align : 'left'
}]],
// 事件調用的方式
onLoadSuccess : function() {
},
onDblClickRow : function(index, row) {
if (row.fileType == "文件夾") {
$.messager.alert('提示窗口','對不起,您選擇的是文件夾,請您選擇確切的文件!','info');
} else {
// 給這個文本域賦值
dataFileTextEle.attr("value", row.filePath);
replaceExistedString(dataFileTextEle.attr("id"),dataFileTextEle.val());
$("#dialog-diskFileInfo").dialog("close");
console.info(params);
}
},
pagination : true
});
var p = $("#fileInfoDataGrid").datagrid('getPager');
$(p).pagination({
pageSize : 10,
pageList : [10, 20, 30, 40, 50, 100],
layout:['list','sep','first','prev','links','next','last','sep','refresh'],
beforePageText : '第',
afterPageText : '頁 ?共{pages}頁',
displayMsg : '當前顯示 {from} - {to} 條記錄 ? 共 {total} 條記錄',
showPageList : true,
showRefresh : true
});
$("#dialog-diskFileInfo").show().dialog("open");
});
// 插件的第一個參數表示的是彈出的dialog元素
// $.fn.diskFileDialogEleBtnCheckOk = function(dialogEle,
// diskFileStructureTree, fileInfoDataGrid) {
//
// // 獲得選中列
// getSelected(dialogEle);
//
// // 獲取選中多行的信息
// // getSelections();
//
// // 選中第二行
// // selectRow(2);
//
// // 不選中第三行
// // unselectRow(2);
//
// // 清除所有的選中行
// // clearSelections();
// }
});
總結
以上是生活随笔為你收集整理的EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 01_Nginx安装,nginx下部署项
- 下一篇: 柴油车仪表显示这个图标是什么意思?