?? grid.formedit.js
字號:
;(function($){
/**
* jqGrid extension for form editing Grid Data
* Tony Tomov tony@trirand.com
* http://trirand.com/blog/
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
**/
var rp_ge = null;
$.fn.extend({
searchGrid : function ( p ) {
p = $.extend({
top : 0,
left: 0,
width: 360,
height: 80,
modal: false,
drag: true,
closeicon: 'ico-close.gif',
dirty: false,
sField:'searchField',
sValue:'searchString',
sOper: 'searchOper',
processData: "",
checkInput :false,
beforeShowSearch: null,
afterShowSearch : null,
onInitializeSearch: null,
closeAfterSearch : false,
// translation
// if you want to change or remove the order change it in sopt
// ['bw','eq','ne','lt','le','gt','ge','ew','cn']
sopt: null
}, $.jgrid.search, p || {});
return this.each(function(){
var $t = this;
if( !$t.grid ) { return; }
if(!p.imgpath) { p.imgpath= $t.p.imgpath; }
var gID = $("table:first",$t.grid.bDiv).attr("id");
var IDs = { themodal:'srchmod'+gID,modalhead:'srchhead'+gID,modalcontent:'srchcnt'+gID };
if ( $("#"+IDs.themodal).html() != null ) {
if( $.isFunction('beforeShowSearch') ) { p.beforeShowSearch($("#srchcnt"+gID)); }
viewModal("#"+IDs.themodal,{modal: p.modal});
if( $.isFunction('afterShowSearch') ) { p.afterShowSearch($("#srchcnt"+gID)); }
} else {
var cM = $t.p.colModel;
var cNames = "<select id='snames' class='search'>";
var nm, hc, sf;
for(var i=0; i< cM.length;i++) {
nm = cM[i].name;
sf = (cM[i].search===false) ? false: true;
if(cM[i].editrules && cM[i].editrules.searchhidden === true) {
hc = true;
} else {
if(cM[i].hidden === true ) {
hc = false;
} else {
hc = true;
}
}
if( nm !== 'cb' && nm !== 'subgrid' && sf && hc===true ) { // add here condition for searchable
var sname = (cM[i].index) ? cM[i].index : nm;
cNames += "<option value='"+sname+"'>"+$t.p.colNames[i]+"</option>";
}
}
cNames += "</select>";
var getopt = p.sopt || ['bw','eq','ne','lt','le','gt','ge','ew','cn'];
var sOpt = "<select id='sopt' class='search'>";
for(var i = 0; i<getopt.length;i++) {
sOpt += getopt[i]=='eq' ? "<option value='eq'>"+p.odata[0]+"</option>" : "";
sOpt += getopt[i]=='ne' ? "<option value='ne'>"+p.odata[1]+"</option>" : "";
sOpt += getopt[i]=='lt' ? "<option value='lt'>"+p.odata[2]+"</option>" : "";
sOpt += getopt[i]=='le' ? "<option value='le'>"+p.odata[3]+"</option>" : "";
sOpt += getopt[i]=='gt' ? "<option value='gt'>"+p.odata[4]+"</option>" : "";
sOpt += getopt[i]=='ge' ? "<option value='ge'>"+p.odata[5]+"</option>" : "";
sOpt += getopt[i]=='bw' ? "<option value='bw'>"+p.odata[6]+"</option>" : "";
sOpt += getopt[i]=='ew' ? "<option value='ew'>"+p.odata[7]+"</option>" : "";
sOpt += getopt[i]=='cn' ? "<option value='cn'>"+p.odata[8]+"</option>" : "";
};
sOpt += "</select>";
// field and buttons
var sField = "<input id='sval' class='search' type='text' size='20' maxlength='100'/>";
var bSearch = "<input id='sbut' class='buttonsearch' type='button' value='"+p.Find+"'/>";
var bReset = "<input id='sreset' class='buttonsearch' type='button' value='"+p.Reset+"'/>";
var cnt = $("<table width='100%'><tbody><tr style='display:none' id='srcherr'><td colspan='5'></td></tr><tr><td>"+cNames+"</td><td>"+sOpt+"</td><td>"+sField+"</td><td>"+bSearch+"</td><td>"+bReset+"</td></tr></tbody></table>");
createModal(IDs,cnt,p,$t.grid.hDiv,$t.grid.hDiv);
if ( $.isFunction('onInitializeSearch') ) { p.onInitializeSearch( $("#srchcnt"+gID) ); };
if ( $.isFunction('beforeShowSearch') ) { p.beforeShowSearch($("#srchcnt"+gID)); };
viewModal("#"+IDs.themodal,{modal:p.modal});
if($.isFunction('afterShowSearch')) { p.afterShowSearch($("#srchcnt"+gID)); }
if(p.drag) { DnRModal("#"+IDs.themodal,"#"+IDs.modalhead+" td.modaltext"); }
$("#sbut","#"+IDs.themodal).click(function(){
if( $("#sval","#"+IDs.themodal).val() !="" ) {
var es=[true,"",""];
$("#srcherr >td","#srchcnt"+gID).html("").hide();
$t.p.searchdata[p.sField] = $("option[selected]","#snames").val();
$t.p.searchdata[p.sOper] = $("option[selected]","#sopt").val();
$t.p.searchdata[p.sValue] = $("#sval","#"+IDs.modalcontent).val();
if(p.checkInput) {
for(var i=0; i< cM.length;i++) {
var sname = (cM[i].index) ? cM[i].index : nm;
if (sname == $t.p.searchdata[p.sField]) {
break;
}
}
es = checkValues($t.p.searchdata[p.sValue],i,$t);
}
if (es[0]===true) {
$t.p.search = true; // initialize the search
// construct array of data which is passed in populate() see jqGrid
if(p.dirty) { $(".no-dirty-cell",$t.p.pager).addClass("dirty-cell"); }
$t.p.page= 1;
$($t).trigger("reloadGrid");
if(p.closeAfterSearch === true) {
hideModal("#"+IDs.themodal);
}
} else {
$("#srcherr >td","#srchcnt"+gID).html(es[1]).show();
}
}
});
$("#sreset","#"+IDs.themodal).click(function(){
if ($t.p.search) {
$("#srcherr >td","#srchcnt"+gID).html("").hide();
$t.p.search = false;
$t.p.searchdata = {};
$t.p.page= 1;
$("#sval","#"+IDs.themodal).val("");
if(p.dirty) { $(".no-dirty-cell",$t.p.pager).removeClass("dirty-cell"); }
$($t).trigger("reloadGrid");
}
});
}
});
},
editGridRow : function(rowid, p){
p = $.extend({
top : 0,
left: 0,
width: 0,
height: 0,
modal: false,
drag: true,
closeicon: 'ico-close.gif',
imgpath: '',
url: null,
mtype : "POST",
closeAfterAdd : false,
clearAfterAdd : true,
closeAfterEdit : false,
reloadAfterSubmit : true,
onInitializeForm: null,
beforeInitData: null,
beforeShowForm: null,
afterShowForm: null,
beforeSubmit: null,
afterSubmit: null,
onclickSubmit: null,
afterComplete: null,
onclickPgButtons : null,
afterclickPgButtons: null,
editData : {},
recreateForm : false,
addedrow : "first"
}, $.jgrid.edit, p || {});
rp_ge = p;
return this.each(function(){
var $t = this;
if (!$t.grid || !rowid) { return; }
if(!p.imgpath) { p.imgpath= $t.p.imgpath; }
// I hate to rewrite code, but ...
var gID = $("table:first",$t.grid.bDiv).attr("id");
var IDs = {themodal:'editmod'+gID,modalhead:'edithd'+gID,modalcontent:'editcnt'+gID};
var onBeforeShow = $.isFunction(rp_ge.beforeShowForm) ? rp_ge.beforeShowForm : false;
var onAfterShow = $.isFunction(rp_ge.afterShowForm) ? rp_ge.afterShowForm : false;
var onBeforeInit = $.isFunction(rp_ge.beforeInitData) ? rp_ge.beforeInitData : false;
var onInitializeForm = $.isFunction(rp_ge.onInitializeForm) ? rp_ge.onInitializeForm : false;
if (rowid=="new") {
rowid = "_empty";
p.caption=p.addCaption;
} else {
p.caption=p.editCaption;
};
var frmgr = "FrmGrid_"+gID;
var frmtb = "TblGrid_"+gID;
if(p.recreateForm===true && $("#"+IDs.themodal).html() != null) {
$("#"+IDs.themodal).remove();
}
if ( $("#"+IDs.themodal).html() != null ) {
$(".modaltext","#"+IDs.modalhead).html(p.caption);
$("#FormError","#"+frmtb).hide();
if(onBeforeInit) { onBeforeInit($("#"+frmgr)); }
fillData(rowid,$t);
if(rowid=="_empty") { $("#pData, #nData","#"+frmtb).hide(); } else { $("#pData, #nData","#"+frmtb).show(); }
if(onBeforeShow) { onBeforeShow($("#"+frmgr)); }
viewModal("#"+IDs.themodal,{modal:p.modal});
if(onAfterShow) { onAfterShow($("#"+frmgr)); }
} else {
var frm = $("<form name='FormPost' id='"+frmgr+"' class='FormGrid'></form>");
var tbl =$("<table id='"+frmtb+"' class='EditTable' cellspacing='0' cellpading='0' border='0'><tbody></tbody></table>");
$(frm).append(tbl);
$(tbl).append("<tr id='FormError' style='display:none'><td colspan='2'>"+" "+"</td></tr>");
// set the id.
// use carefull only to change here colproperties.
if(onBeforeInit) { onBeforeInit($("#"+frmgr)); }
var valref = createData(rowid,$t,tbl);
// buttons at footer
var imp = $t.p.imgpath;
var bP ="<img id='pData' src='"+imp+$t.p.previmg+"'/>";
var bN ="<img id='nData' src='"+imp+$t.p.nextimg+"'/>";
var bS ="<input id='sData' type='button' class='EditButton' value='"+p.bSubmit+"'/>";
var bC ="<input id='cData' type='button' class='EditButton' value='"+p.bCancel+"'/>";
$(tbl).append("<tr id='Act_Buttons'><td class='navButton'>"+bP+" "+bN+"</td><td class='EditButton'>"+bS+" "+bC+"</td></tr>");
// beforeinitdata after creation of the form
createModal(IDs,frm,p,$t.grid.hDiv,$t.grid.hDiv);
// here initform - only once
if(onInitializeForm) { onInitializeForm($("#"+frmgr)); }
if( p.drag ) { DnRModal("#"+IDs.themodal,"#"+IDs.modalhead+" td.modaltext"); }
if(rowid=="_empty") { $("#pData,#nData","#"+frmtb).hide(); } else { $("#pData,#nData","#"+frmtb).show(); }
if(onBeforeShow) { onBeforeShow($("#"+frmgr)); }
viewModal("#"+IDs.themodal,{modal:p.modal});
if(onAfterShow) { onAfterShow($("#"+frmgr)); }
$("#sData", "#"+frmtb).click(function(e){
var postdata = {}, ret=[true,"",""], extpost={};
$("#FormError","#"+frmtb).hide();
// all depend on ret array
//ret[0] - succes
//ret[1] - msg if not succes
//ret[2] - the id that will be set if reload after submit false
var j =0;
$(".FormElement", "#"+frmtb).each(function(i){
var suc = true;
switch ($(this).get(0).type) {
case "checkbox":
if($(this).attr("checked")) {
postdata[this.name]= $(this).val();
}else {
var ofv = $(this).attr("offval");
postdata[this.name]= ofv;
extpost[this.name] = ofv;
}
break;
case "select-one":
postdata[this.name]= $("option:selected",this).val();
extpost[this.name]= $("option:selected",this).text();
break;
case "select-multiple":
postdata[this.name]= $(this).val();
var selectedText = [];
$("option:selected",this).each(
function(i,selected){
selectedText[i] = $(selected).text();
}
);
extpost[this.name]= selectedText.join(",");
break;
case "password":
case "text":
case "textarea":
postdata[this.name] = $(this).val();
ret = checkValues(postdata[this.name],valref[i],$t);
if(ret[0] === false) {
suc=false;
} else {
postdata[this.name] = htmlEncode(postdata[this.name]);
}
break;
}
j++;
if(!suc) { return false; }
});
if(j==0) { ret[0] = false; ret[1] = $.jgrid.errors.norecords; }
if( $.isFunction( rp_ge.onclickSubmit)) { rp_ge.editData = rp_ge.onclickSubmit(p) || {}; }
if(ret[0]) {
if( $.isFunction(rp_ge.beforeSubmit)) { ret = rp_ge.beforeSubmit(postdata,$("#"+frmgr)); }
}
var gurl = rp_ge.url ? rp_ge.url : $t.p.editurl;
if(ret[0]) {
if(!gurl) { ret[0]=false; ret[1] += " "+$.jgrid.errors.nourl; }
}
if(ret[0] === false) {
$("#FormError>td","#"+frmtb).html(ret[1]);
$("#FormError","#"+frmtb).show();
} else {
if(!p.processing) {
p.processing = true;
$("div.loading","#"+IDs.themodal).fadeIn("fast");
$(this).attr("disabled",true);
// we add to pos data array the action - the name is oper
postdata.oper = postdata.id == "_empty" ? "add" : "edit";
postdata = $.extend(postdata,rp_ge.editData);
$.ajax({
url:gurl,
type: rp_ge.mtype,
data:postdata,
complete:function(data,Status){
if(Status != "success") {
ret[0] = false;
ret[1] = Status+" Status: "+data.statusText +" Error code: "+data.status;
} else {
// data is posted successful
// execute aftersubmit with the returned data from server
if( $.isFunction(rp_ge.afterSubmit) ) {
ret = rp_ge.afterSubmit(data,postdata);
}
}
if(ret[0] === false) {
$("#FormError>td","#"+frmtb).html(ret[1]);
$("#FormError","#"+frmtb).show();
} else {
postdata = $.extend(postdata,extpost);
// the action is add
if(postdata.id=="_empty" ) {
//id processing
// user not set the id ret[2]
if(!ret[2]) { ret[2] = parseInt($($t).getGridParam('records'))+1; }
postdata.id = ret[2];
if(rp_ge.closeAfterAdd) {
if(rp_ge.reloadAfterSubmit) { $($t).trigger("reloadGrid"); }
else {
$($t).addRowData(ret[2],postdata,p.addedrow);
$($t).setSelection(ret[2]);
}
hideModal("#"+IDs.themodal);
} else if (rp_ge.clearAfterAdd) {
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -