To introduce a class library:
<link rel= "stylesheet" type= "Text/css" href= "<%=path%>/js/jquery-flexigrid/css/gray/flexigrid.css"/>
<script type= "Text/javascript" src= "<%=path%>/js/jquery-flexigrid/flexigrid.js" ></script>
Related HTML code:
<!--Flexigrid is table-based so you need a TABLE element--
<table id= "Teaminfoflexigrid" ></table>
Initialize the document when it is loaded:
$ (document). Ready (function () {
Initteaminfoflexigrid ();
});
Related JS code:
function Initteaminfoflexigrid () {
$ ("#teamInfoFlexiGrid"). Flexigrid ({
URL: "Http://localhost:8080/test_online/admin/admin_findTeams",
DataType: "JSON",
Rp:15,
autoload:true,//default is True, when set to false is generally used for a page with multiple Flexigrid
Userp:false,
Colmodel: [{
Display: "Company Number",//First column
WIDTH:100,
Align: "center",
Render:function (val, row) {
return row.id;
}
},{
Display: "Company name",//second column
WIDTH:100,
Align: "center",
Render:function (val, row) {
if (row.name) {
Return "<a href= ' javascript:; ' onclick= ' showeditbankdiv (" + row.id + ") ' >" + row.name + "</a>";
}else{
Return "The company has not landed! ";
}
}
},{
Display: "Company Information",
WIDTH:200,
Align: "left",
Render:function (val, row) {
Return "Company Years of Incorporation:" + (Row.age = = null?) ": row.age) +" <br/> Company set up time: "+ (Row.birthday = = null?" ": Row.birthday.substring (0,10)) +" <br/> Company Address: "+ ( Row.address = = null? "": row.age);
}
},{
Display: "Company contact Information",
WIDTH:200,
Align: "left",
Render:function (val, row) {
Return "Company Phone:" + Row.tel + "<br/> Company Email:" + row.email;
}
},{
Display: "Remarks",
WIDTH:100,
Align: "center",
Render:function (val, row) {
return row.remark;
}
},{
Display: "Action:",
WIDTH:100,
Align: "center",
Render:function (val, row) {
Return "<input type= ' button ' class= ' InputB ' value= ' delete ' onclick= ' deleteteam (" + row.id + ") ' >";//You can only return a string here
}
}],
Width: "Auto",
Height: "370",
Showtogglebtn:false,
Showtabletogglebtn:false,
Singleselect:true,
Onsubmit:function () {
Things to do before you submit
return true;
},
Onsuccess:function (grid, data) {
Things to do after a successful execution
return true;
},
Onerror:function () {
What to do if something is wrong
Showwaitdiv (FALSE);
}
});
}
Flexigrid (i)