Jqgrid Project usage record/annotated version/not organized/

Source: Internet
Author: User

Jqgrid Project Use Notes
function Loadactdata () {
$ ("#actGridTable"). Cleargriddata ();//clear the contents of the table first
var url = webcontext + '/act/getactivitiesdata ';//configuration path
$ (' #actGridTable '). Jqgrid ({//Call Jqgrid method
Url:url,
Mtype: ' Post ',//How to set the request background
DataType: ' JSON ',//Set the data type of the transfer
Colnames: [' Activity id ', ' processing type ', ' Activity name ', ' target ', ' creation date ', ' completion rate ', ' Applicant ID ', ' Applicant ', ' Organizer ID ', ' organizer ', ' status ', ' action '],//write out all header information,
Colmodel: [//Column model
{name: ' maId ', index: ' ma_id ', key:true, hidden:true},//setting the various properties of the first column refers to the activity ID name is the value JSON data is sent back when the corresponding key is actually put this is the value for example: JSON is { maid,1} So here's the 1. Index is the column name that the request (and interaction) is ordered to be sorted with the name of the field in the number library here Key:true is set this is the only label for this column hidden:true refers to this list is hidden column is not displayed but also stand colnames In one of
{name: ' Dealtype ', index: ' Deal_type ', hidden:true},
/** below this is the specified width unit is PX formatter:function is used to solve the problems we have to convert some database data to other desired data connection, etc.
* Specifies that this method must have a return value return value can be an HTML document This method contains the sane parameter we generally use the most later parameters mostly
* RowData refers to the data acquisition method of the current row directly with the "." Column name (because it is JS inside his essential principle is also that the JSON data parsed into the array is a key value pair) options can also use the following options.rowid refers to our operation of the row of the primary key ( The only indication) is just the maid column specified with (key=true)
* So there's a way back to the question of the native URL pass parameter get parameter
*/
{name: ' name ', Width: ' + ', Index: ' Name ', Formatter:function (Cellvalue, Options, RowData) {
var dealtype = rowdata.dealtype;//Active state. 0: main activities; 1: collaborative activities; 2: Solicitation Activities
var rowId = Options.rowid;
var name = Rowdata.name;
var state = Rowdata.state;
var temp= ' <a href= ' ' +webcontext+ '/act/forwardactdetail?maid= ' +rowid+ ' &actflag=invite ' > ' +name+ ' </a > ';
var temp= ' <a href= ' +webcontext+ '/marketa/fowardeditactivity?maid= ' +rowid+ ' &editflag=edit ' > ' +name+ ' </a> ';
if (2==state) {//2: in the application;
Temp=name;
}else if (3==state| | 2==dealtype) {//3: Rejected
}else if ((3==state&&1==dealtype) | | 2==dealtype) {//3: Rejected
Temp=name;
}
var temp= ' <a href= ' +webcontext+ '/marketa/fowardeditactivity?maid= ' +rowid+ ' &editflag=detail ' > ' +name+ ' </a> ';
if (1==dealtype) {
temp = temp+ ' <span class= ' Label-act-xiezuo label-info ' > Collaboration </span> ';
}else if (2==dealtype) {
temp = temp+ ' <span class= "Label-act-xiezuo label-info" style= "Background-color: #ffb915" > Solicitation </span> ";
}else if (4==dealtype) {
temp = ' &nbsp;|-&nbsp; ' +temp;
}
return temp;
}},
{name: ' Points ', Width: ' + ', index: ' Points '},
{name: ' Createtime ', Width: ' + ', index: ' Create_time '},
{name: ' conversionrate ', Width: ' + ', index: ' Conversion_rate ', Formatter:function (val) {//A value of the case plus Val refers to the current value
var cellvalue = val;
if (typeof (Cellvalue)! = ' undefined ' && cellvalue!=null) {
Cellvalue = cellvalue*100+ '% ';
}else{
Cellvalue = cellvalue+ '% ';
}
return cellvalue;
}},
{name: ' Createuserid ', index: ' create_user_id ', hidden:true},
{name: ' Createusername ', Width: ' + ', index: ' create_user_name '},//applicant's name
{name: ' Owneruserid ', index: ' owner_user_id ', hidden:true},
{name: ' Ownerusername ', Width: ' + ', index: ' Owner_user_name '},
{name: ' state ', align: ' Left ', index: ' state ', Formatter:function (val) {
var cellvalue = val;//Active state. 0: in progress; 1: closed; 2: in Application; 3: Rejected
if (Cellvalue = = 0) {
Cellvalue = ' <span class= ' act-table-acting ' > Promotion </span> ';
}else if (Cellvalue = = 1) {
Cellvalue = ' <span class= ' act-table-end > Completed </span> ';
}else if (Cellvalue = = 2) {
Cellvalue = ' <span class= ' act-table-planing ' > Planning </span> ';
}else if (Cellvalue = = 3) {
Cellvalue = ' <span class= ' act-table-refuse ' > rejected </span> ';
}
return cellvalue;
}},
{name: ' edit ', align: ' left ', Sortable:false, Formatter:function (Cellvalue, Options, RowData) {
var rowId = Options.rowid;
Needs to be handled according to the specific circumstances of the record
var state = Rowdata.state;
var dealtype = rowdata.dealtype;//Processing Type 0: main activity; 1: Collaborative activity; 2: Solicitation activity
The available buttons
var agree = ' <a href= ' ' +webcontext+ '/marketa/forwardcreateactivity?maid= ' +rowid+ ' "title=" accept "class=" Handle-col Mr-left10 "onclick=" agreeactivity (' +rowid+ ') "> Accept </a>";
var refuse = ' <a href= ' javascript:; ' title= ' Reject ' class= ' handle-col mr-left10 ' onclick= ' refuseactivity (' +rowid+ ') ' Data-toggle= "modal" data-target= "#act_dialog" > Reject </a> ";
var edit = ' <a href= ' +webcontext+ '/marketa/fowardeditactivity?maid= ' +rowid+ ' &editflag=edit ' title= ' edit ' class = "Handle-col mr-left10" onclick= "scanactivity (' +rowid+ ')" > Edit </a> ";
Gray unavailable button
var agree_ = ' <span href= ' javascript:; ' title= ' Accept ' class= ' handle-col-no mr-left10 ' > Accept </span> ';
var refuse_ = ' <span href= ' javascript:; ' title= ' Deny ' class= ' handle-col-no mr-left10 ' > Deny </span> ';
var edit_ = ' <span href= ' javascript:; ' title= ' edit ' class= ' handle-col-no mr-left10 ' > Edit </span> ';

var agreechoose = ' <a href= ' javascript:; ' title= ' Accept ' class= ' handle-col mr-left10 ' onclick= ' agreechoose (' +rowid+ ') ' Data-toggle= "modal" data-target= "#choose_dialog" > Accept </a> ";

Assign a button to a state
if (2==dealtype) {//select person
if (2>state) {
return refuse_+agreechoose+edit_;
return edit_;
}else{
return refuse_+agree_+edit_;
return edit_;
}
}else if (0==state) {//Active state. 0: in progress;
return refuse_+agree_+edit;
return edit;
}else if (1==state) {///1: Closed;
return refuse_+agree_+edit_;
return edit_;
}else if (2==state) {//2: in the application;
return refuse+agree+edit_;
return edit_;
}ELSE{//3: Rejected
return refuse_+agree_+edit_;
return edit_;
}
}},
],

Jsonreader: {//server Returns JSON parsing settings because he's a three-party PageList object. The list in him is the real data of the page.
Root: "List",//For data list in JSON
Page: "Pagenum",//equivalent to Pagelist.pagenum value to him
Total: "pages",//Ibid.
Records: "Total",//overall record count (used in LoadComplete below)
Repeatitems:false,
},
Beforerequest:function () {//Before requesting data
var postdata = {}; Pass parameter Preparation!
Postdata.userid = Loginuser.userid; Equivalent to Userid:xxx
Postdata.searchtext = $ (' #searchText '). Val (); Get the value of the lookup box SearchText: Find Content
$.extend ($ ("#actGridTable"). Getgridparam ("PostData"), postdata);//Add this postdata attribute to the Grid function This property refers to the user parameter at the time of the request
},
Loadcomplete:function () {//after loading is complete
var re_records = $ ("#actGridTable"). Getgridparam (' Records ');//What is the total number of records
alert (re_records);
if (re_records = = 0) {
$ ("#tishi"). Show ();
}else{
$ ("#tishi"). Hide ();
}
},
Resizeable:true,
rownumbers:true,//display the number of record bars
Hidegrid:true,
Shrinktofit:true,
viewrecords:true,//defines whether to display the total number of records
SortOrder: ' desc ',//specified in ascending or descending order
Sortname: ' Create_time ',//Specify row sequence
Height: "100%",
Autowidth:true,
Rowlist: [10, 15, 20],//an array is used to adjust the number of records displayed by the table, and this parameter value is substituted for the rownum parameter value passed to the server side.
rownum:15,//default page showing 15 article
Caption: "Organization list",
Pager: "#actGridPager"//front Page
}). Navgrid (' #actGridPager ', {add:false, Edit:false, Del:false, Search:false, refresh:false});

Remove horizontal scroll bar
$ (' #actGridTable '). Closest (". Ui-jqgrid-bdiv"). css ({' overflow-x ': ' Hidden '});

}

Jqgrid Project usage record/annotated version/not organized/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.