一個簡單的easyui Grid 封裝
/**
*
* 一個簡單得通用 dataGrid
*
* field 字段開頭
* 參數注意項
* {
* 1：規範數據庫 字段，數據庫字段，實例類屬性，頁面展現屬性要一致
* 2：若字段只用於‘展現’ 不用於添加 在字段後額外添加一個 - 字符表示
* 3：若字段只用於’添加‘ 不用於展現 在字段後額外添加一個 ~ 字符表示
* 4：若字段只用於‘隱藏添加’ 不用於展現 在字段後額外添加一個 * 字符表示
* 5：因爲字符 -,~,* 被用做區分是否在添加Div中顯示，故 -,~,* 字符不能在用做 filed 字段的內容
* 6: 所用字符爲 英文「破折號 -」 不是 「下劃線 _ 」注意區分
* 7：隱藏添加示例：修改時，form 表單中須要添加一個保存屬性 ID 得 input
* 8：用做隱藏添加的也必須寫上中文描述與寬度能夠爲空（添加時必須寫中文描述），這樣保證傳遞的三個數組長度一致
* 9：field得第一個數據我看成是未來要使用它 進行刪除的數據
* }
* title 列得標題
* width 寬度
* 參數注意項
* {
* 1：寬度按百分比來顯示
* 2：在添加時只用寫 百分比數字便可，不用加 「%」 ，我在代碼中已經添加
* }
* divId dataGrid 的 id
* button dataGrid 將要顯示的按鈕
* 參數注意項
* {
* 1：參數添加是 每一個按鈕都是一個對象
* 2：按鈕現階段有三個 add edit del 後階段在進行拓展
* 3：按鈕對項中的每一個屬性都必須有
* 4：按鈕對象示例 {fun:"add",path:""} path 中存放完整路徑
* 5：按鈕添加的順序不作強制要求
* }
* sel 須要搜索的條件
* 參數注意事項
* {
* 1：參數爲對象傳遞
* 2：對象的‘鍵’爲搜索的ID（form 中的 neme） ‘值’爲搜索提示
* }
*
* 注 ： 這只是一個最簡單的’增刪改‘封裝，沒有涉及到easyui 的其餘強大的功能。須要使用其它功能請忽略這個封裝。
*/html
var selPath = []; //用來傳遞搜索路徑
var dataGrid = [];//用來傳遞 grid ID
var parameter = []; //用來保存搜索參數,一個頁面可能有多層 grid 因此用數組存儲，每層對應一個 grid
var Index = 0 ;//數組的下標
//生成數據列主函數
function easyBuild(field,title,width,divId,button,sel){
datagrid = divId;// dataGrid
if(isArray(field) && isArray(title) && isArray(width)){ //判斷傳入進來的參數是不是數組
if(field.length == title.length && field.length == width.length){//判斷傳遞進來的數組長度是否一致，防止出錯
/*var toolbars = new Array(); //爲添加按鈕準備
if(button != null && button != "" && button != undefined){//添加按鈕 以及 按鈕事件
for(var i = 0; i < button.length; i++){
switch (button[i].fun) {
case "add":var pathAdd = button[i].path;
toolbars.push({iconCls:'icon-add',text:"增長",handler:function(){Add_JS(field,title,divId,pathAdd)}});
toolbars.push('-');
break;
case "edit":var pathEdit = button[i].path;
toolbars.push({iconCls:'icon-edit',text:"修改",handler:function(){Edit_JS(field,title,divId,pathEdit)}});
toolbars.push('-');
break;
case "del":var pathDel = button[i].path;
toolbars.push({iconCls:'icon-remove',text:"批量刪除",handler:function(){Del_JS(divId,pathDel,field[0])}});
toolbars.push('-');
break;
case "sel":selPath = button[i].path;dataGrid = divId;
break;
}
}
}*/
//$("#buttonDiv").html("");
if($("#"+divId+"Div").attr("fire") != "me"){ //判斷是否已經存在div 若是存在 則刷新，不存在就新建
$("#toolbars").append("<div id='"+divId+"Div' fire='me'></div>"); //添加自定義 fire 標記用做判斷 div 是否已經存在
}
$("#"+divId+"Div").html("");
if(button != null && button != "" && button != undefined){//添加按鈕 以及 按鈕事件
$("#"+divId+"Div").append("<div id='"+divId+"Button' ></div>");
for(var i = 0; i < button.length; i++){
switch (button[i].fun) {
case "add":var pathAdd = button[i].path;
$("#"+divId+"Button").append("<a herf='#' id='"+divId+"addA' class='easyui-linkbutton' iconCls='icon-add'>增長</a>");
$("#"+divId+"addA").on("click",function(){
Add_JS(field,title,divId,pathAdd);
})
break;
case "edit":var pathEdit = button[i].path;
$("#"+divId+"Button").append("<a herf='#'id='"+divId+"editA' class='easyui-linkbutton' iconCls='icon-edit'>修改</a>")
$("#"+divId+"editA").on("click",function(){
Edit_JS(field,title,divId,pathEdit);
})
break;
case "del":var pathDel = button[i].path;
$("#"+divId+"Button").append("<a herf='#' id='"+divId+"delA' class='easyui-linkbutton' iconCls='icon-remove'>批量刪除</a>");
$("#"+divId+"delA").on("click",function(){
Del_JS(divId,pathDel,field[0]);
})
break;
case "sel": selPath[Index] = button[i].path;
dataGrid[Index] = divId;
break;
}
}
$.parser.parse("#"+divId+"Div");
}
//$("#selDiv").html("");
//$("#toolbars #"+divId+"Sel").html("");
if(sel != null && sel != "" && sel != undefined){//添加查詢 以及 按鈕事件
$("#"+divId+"Div").append("<div id='"+divId+"Sel' ></div>");
//$("#toolbars").append("<div id='"+divId+"Sel'></div>");
var form = "<form id='selForm' method='post'> <table> <tr>";
var flag = false;
for(var name in sel){
if(name != "pad"){
form += "<td> "+sel[name] +": </td>" +
"<td> <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+name+"' id = '"+name+"'/> </td> " ;
}
if(name == "pad"){
flag = true;
}
}
form += "<td> <a herf='#' class='easyui-linkbutton' iconCls='icon-search' onclick='sel("+$("selForm").serialize()+")'>查詢</a> </td>";
if(flag){
form += "<td> <a herf='#' id='padA' class='easyui-linkbutton' iconCls='icon-ok'>肯定</a> </td>";
}
form += "</tr></table></form> ";
$("#"+divId+"Sel").append(form);
$("#padA").on("click",function(){
Pad_JS(divId);
});
$.parser.parse("#"+divId+"Sel");
}
var columns = new Array();//總頭
var column = new Array();//標題列
if(!flag){
column.push({field:'ck',checkbox:true});//添加複選按鈕行
$("#"+divId).datagrid({
singleSelect:false
});
}else{
$("#"+divId).datagrid({
singleSelect:true
});
}
for(var i =0;i<field.length;i++){//添加標題
if(field[i].indexOf("~") < 0 && field[i].indexOf("*","") < 0){ //當字符中含有 ~ 表示只添加 不展現。此處忽略帶有 ~ field
column.push({field:field[i].replace("-",""),title:title[i],width:width[i]+"%",align:'center'});
}
/*column.push({field:field[i].replace("-",""),title:title[i],width:width[i]+"%",align:'center'});*/
}
columns.push(column);
$("#"+divId).datagrid({//dataGrid 主體
rownumbers:true,
pagination:true,
autoRowHeight:true,
striped:true,
pageList:[5,10,20,30],
pageSize:10,
fitColumns:true,
columns:columns,
toolbar:"#"+divId+"Div",
});
reservedGrid(); //預留接口若是 還須要對 datagrid 作其餘事情 能夠在這裏實現
}else{
alert("檢查傳遞的參數長度是否一致！");
}
}else{
alert("檢查傳遞的參數是數組？！");
}
}ajax
/**
* 添加方法主題
* field : 將要添加的的屬性
* title ：將要添加的標題
* divId ：要添加內容的DIV
* url ： 添加後保存的路徑
*/
function Add_JS(field,title,divId,url){
if(verifyFar()){ //增長前判斷是否還有其餘操做沒有完成
$("#addDiv").html("");//清空將要內容的DIV 避免重複添加
var html = "<form id='AddForm' method='post'><table class='tableForm'>";
var tr = ""
var length_ = fildeLength(field);
if(length_ <=6){ //當要添加的項多餘6項時 單列顯示
for(var i = 0;i<field.length;i++){
if(field[i].indexOf("-") <= 0){
if(field[i].indexOf("*")<= 0){
tr += "<tr>" ;
}else{
tr += "<tr style='display:none'>" ;
}
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("*","")+"' id= '"+field[i].replace("*","")+"'/> </td>" ;
"</tr>"
}
$("#addDiv").dialog({ //彈出框主體
title:'請輸入信息',
width: "300", //當爲一列顯示的時候設置寬度爲 350 px;
height: "auto",
modal:true,
maximizable:false,
buttons: '#submits',
closed:true,
left:250,
top:150
});
}
}
if(6 < length_ && length_ <= 12){ //當要添加的項 在 6-12項的時候 2 列顯示
for(var i = 0;i<field.length;i++){
tr += "<tr>" ;
while(true && i < field.length){ //死循環-而且防止 下標越界
if(field[i].indexOf("-") < 0 ){//判斷是否含有 - 符若是有 就不添加 而且判斷是不是隱藏添加
if(field[i].indexOf("*")< 0){
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"'/> </td>" ;
i++;
break;
}else{
tr += "<td style='width:140px;text-align: right;display:none;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;display:none;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("*","")+"' id= '"+field[i].replace("*","")+"'/> </td>" ;
i++;
}
}else{
i++;
}
}
while(true && i < field.length){
if(field[i].indexOf("-") < 0){
if(field[i].indexOf("*")< 0){
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"'/> </td>" ;
break;
}else{
tr += "<td style='width:140px;text-align: right;display:none;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;display:none;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("*","")+"' id= '"+field[i].replace("*","")+"'/> </td>" ;
i++;
}
}else{
i++;
}
}
tr += "</tr>"
$("#addDiv").dialog({
title:'請輸入信息',
width: "550", //當爲兩列顯示的時候設置寬度爲 550 px;
height: "auto",
modal:true,
maximizable:false,
buttons: '#submits',
closed:true,
left:250,
top:150
});
}
}
if(12<length_ ){//當要添加的項 在12 項以上的時候 3 列顯示
for(var i = 0;i<field.length;i++){
tr += "<tr>" ;
while(true && i < field.length ){
if(field[i].indexOf("-") <= 0 && field[i].indexOf("*")<= 0){
if(field[i].indexOf("*")< 0){
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"'/> </td>" ;
i++;
break;
}else{
tr += "<td style='width:140px;text-align: right;display:none;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;display:none;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"'/> </td>" ;
i++;
}
}else{
i++;
}
}
while(true && i < field.length ){
if(field[i].indexOf("-") <= 0 && field[i].indexOf("*")<= 0){
if(field[i].indexOf("*")< 0){
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"'/> </td>" ;
i++;
break;
}else{
tr += "<td style='width:140px;text-align: right;display:none;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;display:none;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"'/> </td>" ;
i++;
}
}else{
i++;
}
}
while(true && i < field.length ){
if(field[i].indexOf("-") <= 0 && field[i].indexOf("*")<= 0){
if(field[i].indexOf("*")< 0){
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"'/> </td>" ;
break;
}else{
tr += "<td style='width:140px;text-align: right;display:none;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;display:none;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"'/> </td>" ;
i++;
}
}else{
i++;
}
}
tr += "</tr>"
$("#addDiv").dialog({//彈出框 主體
title:'請輸入信息',
width: "750", //當爲三列顯示的時候設置寬度爲 750 px;
height: "auto",
modal:true,
maximizable:false,
buttons: '#submits',
closed:true,
left:250,
top:150
});
}
}
html += tr + "</table></form>"
$("#addDiv").append(html);
$.parser.parse("#addDiv");
reservedAdd();//預留接口，若是後續還須要對 增長div 作其餘操做 能夠在這裏實現
Index += 1; //每次開啓一層 下標後移
$("#addDiv").dialog('open');
$("#submits a").attr("onclick","submit('"+url+"')");
}else{
$.messager.alert('提示', '請先保存父級數據！', 'error');
}
}
/**
* 修改方法
* @param field form表單 name 及 id 填充
* @param title 提示輸入頭
* @param divId DIV 的ID
* @param url 請求提交的 URL
*/
function Edit_JS(field,title,divId,url){
var rows = $("#"+divId).datagrid('getSelections');
if(rows.length == 1){
var length_ = fildeLength(field);
$("#addDiv").html("");
var html = "<form id='AddForm' method='post'><table class='tableForm'>";
var tr = ""
for(var i = 0;i<field.length;i++){
if(length_ <= 6 ){
if(field[i].indexOf("-") <= 0){
if(field[i].indexOf("*") > -1){ // 判斷
tr += "<tr style='display:none'>" ;
}else{
tr += "<tr>" ;
}
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name='"+divId+"."+field[i].replace("~","").replace("*","")+"' id= '"+field[i].replace("~","").replace("*","")+"' value='"+rows[0][field[i].replace("*","").replace("~","")]+"'/> </td>" ;
"</tr>"
}
$("#addDiv").dialog({
title:'請輸入信息',
width: "350",
height: "auto",
modal:true,
maximizable:false,
buttons: '#submits',
closed:true,
left:250,
top:150
});
}
if(6 < length_ && length_ <= 12){
tr += "<tr>" ;
while(true && i < field.length){
if(field[i].indexOf("-") <= 0 ){
if(field[i].indexOf("*") > -1){
tr += "<td style='width:140px;text-align: right;display:none;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;display:none;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("*","")+"' id= '"+field[i].replace("*","")+"' value='"+rows[0][field[i].replace("*","")]+"' /> </td>" ;
i++;
}else{
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"' value='"+rows[0][field[i].replace("~","")]+"' /> </td>" ;
i++;
break;
}
}else{
i++;
}
}
while(true && i < field.length){
if(field[i].indexOf("-") <= 0 ){
if(field[i].indexOf("*") > -1){
tr += "<td style='width:140px;text-align: right;display:none;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;display:none;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("*","")+"' id= '"+field[i].replace("*","")+"' value='"+rows[0][field[i].replace("*","")]+"' /> </td>" ;
i++;
}else{
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"' value='"+rows[0][field[i].replace("~","")]+"' /> </td>" ;
break;
}
}else{
i++;
}
}
tr += "</tr>"
$("#addDiv").dialog({
title:'請輸入信息',
width: "550",
height: "auto",
modal:true,
maximizable:false,
buttons: '#submits',
closed:true,
left:250,
top:150
});
}
if(12<length_){
tr += "<tr>" ;
while(true && i < field.length){
if(field[i].indexOf("-") > -1 && i<field.length-1){
if(field[i].indexOf("*") > -1){
tr += "<td style='width:140px;text-align: right;display:none;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;display:none;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("*","")+"' id= '"+field[i].replace("*","")+"' value='"+rows[0][field[i].replace("*","")]+"' /> </td>" ;
i++
}else{
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"' value='"+rows[0][field[i].replace("~","")]+"' /> </td>" ;
i++;
break;
}
}else{
i++;
}
}
while(true && i < field.length){
if(field[i].indexOf("-") > -1 ){
if(field[i].indexOf("*") > -1){
tr += "<td style='width:140px;text-align: right;display:none;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;display:none;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("*","")+"' id= '"+field[i].replace("*","")+"' value='"+rows[0][field[i].replace("*","")]+"' /> </td>" ;
i++;
}else{
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"' value='"+rows[0][field[i].replace("~","")]+"' /> </td>" ;
i++;
break;
}
}else{
i++;
}
}
while(true && i < field.length){
if(field[i].indexOf("-") > -1){
if(field[i].indexOf("*") > -1){
tr += "<td style='width:140px;text-align: right;display:none;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;display:none;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("*","")+"' id= '"+field[i].replace("*","")+"' value='"+rows[0][field[i].replace("*","")]+"' /> </td>" ;
i++;
}else{
tr += "<td style='width:140px;text-align: right;'>" + title[i] +"：</td>"+
"<td style='width:140px;text-align: right;'>" +
" <input class='easyui-textbox' style='width:190px;height:32px;' name = '"+divId+"."+field[i].replace("~","")+"' id= '"+field[i].replace("~","")+"' value='"+rows[0][field[i].replace("~","")]+"' /> </td>" ;
break;
}
}else{
i++;
}
}
tr += "</tr>"
$("#addDiv").dialog({
title:'請輸入信息',
width: "750",
height: "auto",
modal:true,
maximizable:false,
buttons: '#submits',
closed:true,
left:250,
top:150
});
}
}
html += tr + "</table></form>"
$("#addDiv").append(html);
reservedEdit();
$.parser.parse("#addDiv");
Index += 1; //每次開啓一層 下標後移
$("#addDiv").dialog('open');
$("#submits a").attr("onclick","submit('"+url+"')");
}else{
$.messager.alert('提示', '請選擇一項要編輯的記錄！', 'error');
}
}
/**
* 刪除方法
* @param divId 刪除時dataGrid 得ID
* @param url 刪除時得路徑
*/
function Del_JS(divId,url,dataId){
var rows = $("#"+divId).datagrid('getSelections');
if(rows.length>=1){
var ids = "";//獲取多個ID
for(var i = 0 ;i<rows.length;i++){
if(i<rows.length-1){
ids += "'" + rows[i][dataId.replace("~","").replace("*","").replace("-","")] + "',"
}else{
ids += "'" + rows[i][dataId.replace("~","").replace("*","").replace("-","")] + "'"
}
}
$.messager.confirm("confirm", "你肯定要刪除嗎？", function(r){
if(r){
$.ajax({
method:'post',
url:url,
dataType:'json',
data:{
"ids":ids
},
success:function(data){
sel(parameter[Index]);
}
});
}
})
}else{
$.messager.alert('提示', '請選擇要刪除的記錄！', 'error');
}
}數據庫
/**
* 提交方法
* @param url 提交路徑
*/
function submit(url){
$.ajax({
method:'post',
url:url,
dataType:'json',
data:$("#AddForm").serialize(),
success:function(data){
$("#addDiv").dialog('close');
Index -= 1; //關閉一層的時候 下標前移
sel(parameter[Index]);
}
});
}json
/**
* 搜索的方法
* 其中 selPath，dataGrid 爲全局變量，在js初始時賦值
* @param data 傳到後臺的值
*/
function sel(dataFrom){
//因爲提交事後 還須要用到當前的參數，因此先將參數保存到全局 而後再 使用全局參數（在添加刪除修改以後刷新數據 仍是會用到）
parameter[Index] = dataFrom;
$.ajax({
method:'post',
url:selPath[Index], //全局變量
dataType:'json',
data:parameter[Index],
success:function(data){
var dataObj = {data:data}
$('#'+dataGrid[Index]).datagrid(dataObj);
}
});
}數組
function Pad_JS(divId){
var rows = $("#"+divId).datagrid('getSelections');
if(rows.length == 1){
padded(rows[0]);//確認功能時 將得到到的值 傳到調用頁面
}else{
$.messager.alert('提示', '請選一項要確認的項！', 'error');
}
}app
function padded(row){ //確認功能時 將得到到的值 傳到調用頁面 ，得到到值以後進行的相關操做， 也在調用頁面重寫
console.log(row);
}dom
/**
* 驗證是否爲數組的方法
* @param obj 須要驗證的參數
* @returns {Boolean}
*/
function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]';
}函數
/**
* 判斷傳進來的參數，須要添加的項的個數
*/
function fildeLength(filde){
var length = filde.length;
for(var i=0;i<filde.length ;i++){
if(filde[i].indexOf('-') >=0 || filde[i].indexOf('*') >=0){ // ‘-’ 表示只顯示不添加
length--;
}
}
return length;
}post
function reservedGrid(){ // dategrid添加完成後 想要作的操做 能夠在調用頁面重寫
}ui
function reservedAdd(){ //彈出DIV 添加完成時 想要作的其餘操做 能夠在調用頁面重寫
}
function reservedEdit(){
}
function verifyFar(){ // 執行添加操做前 判斷是否還有其餘操做沒有完成 能夠在調用頁面重寫
return true;
}
//分頁
function getData(){
var rows = [];
for(var i=1; i<=800; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
return rows;
}
//點擊分頁實現 從新加載頁碼
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
頁面調用示例
以上就是所有內容--------------------------------------------------------------------------------
這個封裝比較傾向與公司需求 歡迎你們指點。第一次發博客，有什麼不對的地方也請你們指點一下
- 1. easyui之grid再封裝
- 2. 一個最簡單的類JQuery封裝
- 3. 一個簡單的mybatis封裝（二）
- 4. 簡單封裝一個ajax插件
- 5. Android 簡單封裝一個精美、好用的菜單型PopupWindow
- 6. ajax簡單封裝
- 7. axios簡單封裝
- 8. HttpClient4.5.1簡單封裝
- 9. Freemarker簡單封裝
- 10. EventBus簡單封裝
- 更多相關文章...
- • C# 封裝 - C#教程
- • 第一個Hibernate程序 - Hibernate教程
- • Docker容器實戰(一) - 封神Server端技術
- • Github 簡明教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. easyui之grid再封裝
- 2. 一個最簡單的類JQuery封裝
- 3. 一個簡單的mybatis封裝（二）
- 4. 簡單封裝一個ajax插件
- 5. Android 簡單封裝一個精美、好用的菜單型PopupWindow
- 6. ajax簡單封裝
- 7. axios簡單封裝
- 8. HttpClient4.5.1簡單封裝
- 9. Freemarker簡單封裝
- 10. EventBus簡單封裝