API tools faq
paste
Guest User

Untitled

a guest
Jan 14th, 2019
137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.33 KB | None | 0 0
raw download clone embed print report
  1. How to use edit function in Jqgrid [closed]
  2. var $mygrid= jQuery("#list").jqGrid({
  3. url:'example.php',
  4. datatype: 'xml',
  5. mtype: 'GET',
  6. colNames:['Seq','Name', 'ID','Pass','Mail','Note'],
  7. colModel :[
  8. {name:'seq',index:'seq', width:55, resizable:false, editable:true, editoptions:{readonly:true,size:10}},
  9. {name:'name',index:'name', width:90,resizable:false, editable:true, editoptions:{readonly:false,size:10}},
  10. {name:'id',index:'id', width:80, align:'right', editable:true, editoptions:{readonly:false,size:10}},
  11. {name:'pass',index:'pass', width:80, align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
  12. {name:'mail',index:'mail', width:80,align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
  13. {name:'id',index:'id', width:150, sortable:false} ],
  14. pager: jQuery('#pager'),
  15. rowNum:10,
  16. rowList:[10,20,30,50],
  17. sortname: 'seq',
  18. sortorder: "Asc",
  19. width: 1000,
  20. height: 230,
  21. viewrecords: true,
  22. multiselect: true,
  23. editable: true,
  24. toolbar: [true,"top"],
  25. multikey: "ctrlKey",
  26. editurl:'add.php',
  27. caption: 'staff'
  28.  
  29.  
  30. });
  31. $("#list").jqGrid('navGrid', '#pager', {
  32. edit: true,
  33. add: true,
  34. del: true,
  35. search: false,
  36. refresh:false
  37. })
  38.  
  39. enter code here <?php
  40. $dbhost = 'localhost';
  41. $dbuser = 'test';
  42. $dbpassword = 'test';
  43. $database = 'cs_test';
  44.  
  45. $page = $_GET['page'];
  46. // get how many rows we want to have into the grid - rowNum parameter in the grid
  47. $limit = $_GET['rows'];
  48. // get index row - i.e. user click to sort. At first time sortname parameter -
  49. // after that the index from colModel
  50. $sidx = $_GET['sidx'];
  51.  
  52. // sorting order - at first time sortorder
  53. $sord = $_GET['sord'];
  54. // if we not pass at first time index use the first column for the index or what you want
  55. if(!$sidx) $sidx =1;
  56. // connect to the MySQL database server
  57. $db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
  58. // select the database
  59. mysql_select_db($database) or die("Error conecting to db.");
  60. // calculate the number of rows for the query. We need this to paging the result
  61. $result = mysql_query("SELECT COUNT(*) AS count FROM TM_Staff");
  62. $row = mysql_fetch_array($result,MYSQL_ASSOC);
  63. $count = $row['count'];
  64. // calculation of total pages for the query
  65. if( $count > 0 ) {
  66. $total_pages = ceil($count/$limit);
  67. //$total_pages = 20;
  68. } else {
  69. $total_pages = 0;
  70. }
  71. if ($page > $total_pages) $page=$total_pages;
  72. $start = $limit*$page - $limit;
  73. if($start<0) $start = 0;
  74. // the actual query for the grid data
  75. $SQL = "SELECT seq,name,id,pass,mail,ins_dt from TM_Staff ORDER BY $sidx $sord LIMIT $start,$limit";
  76. $result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
  77. if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
  78. header("Content-type: application/xhtml+xml;charset=utf-8");
  79. } else {
  80. header("Content-type: text/xml;charset=utf-8");
  81. }
  82. echo "<?xml version='1.0' encoding='utf-8'?>";
  83. echo "<rows>";
  84. echo "<page>".$page."</page>";
  85. echo "<total>".$total_pages."</total>";
  86. echo "<records>".$count."</records>";
  87. // be sure to put text data in CDATA
  88. while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
  89. echo "<row id='". $row[seq]."'>";
  90. echo "<cell>". $row[seq]."</cell>";
  91. echo "<cell>". $row[name]."</cell>";
  92. echo "<cell>". $row[id]."</cell>";
  93. echo "<cell>". $row[pass]."</cell>";
  94. echo "<cell>". $row[mail]."</cell>";
  95. echo "<cell><![CDATA[". $row[id]."]]></cell>";
  96. echo "</row>";
  97. }
  98. echo "</rows>";
  99. ?>
  100.  
  101. var lastSel;
  102. $(function () {
  103.  
  104. $("#grid").jqGrid({
  105. colNames: ['Name', 'Address', 'Contact', 'Pan Number', 'Registration Number', 'Email Address', 'File'],
  106. colModel: [
  107. { name: 'Name', index: 'Name', sortable: true, align: 'left', title: false, width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
  108.  
  109. { name: 'Address', index: 'Address', sortable: true, title: false, align: 'left', width: 220, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
  110.  
  111. { name: 'Contact', index: 'Contact', sortable: true, title: false, align: 'left', width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
  112.  
  113. { name: 'PanNumber', index: 'PanNumber', sortable: true, title: false, align: 'left', width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
  114.  
  115. { name: 'ServiceTaxRegistrationNo', index: 'ServiceTaxRegistrationNo', title: false, sortable: true, align: 'left', width: 240, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
  116.  
  117. { name: 'Email', index: 'Email', sortable: true, align: 'left', title: false, width: 190, editable: true, edittype: 'text', editrules: { required: true, email: true }, formoptions: { elmprefix: '* ' }, search: false },
  118.  
  119. { name: 'FilePath', index: 'FilePath', sortable: false, title: false, align: 'left', editable: true, edittype: 'file', width: 190, allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
  120. search: false, editoptions: {
  121. enctype: "multipart/form-data"
  122. }
  123. },
  124. ],
  125. pager: jQuery("#pager"),
  126. sortname: 'Name',
  127. rowNum: 10,
  128. rowList: [10, 20, 25],
  129. sortOrder: "",
  130. height: 225,
  131. viewrecords: true,
  132. rownumbers: true,
  133. caption: "Companies",
  134. width: 950,
  135. imgpath: '/Content/themes/smoothness/images',
  136. url: "/Master/GetCompanies",
  137. editurl: "/Master/PerformCompanyCRUDAction",
  138. datatype: "json",
  139. mtype: "GET",
  140. onCellSelect: function (rowid, iCol, aData) {
  141. if (rowid && rowid !== lastSel) {
  142. if (lastSel) {
  143. $("#" + lastSel).removeClass('state-active');
  144. $("#" + lastSel).addClass('ui-widget-content');
  145. }
  146. $("#" + rowid).removeClass('ui-widget-content');
  147. $("#" + rowid).addClass('state-active');
  148. lastSel = rowid;
  149. }
  150. }
  151.  
  152. });
  153.  
  154. jQuery("#grid").jqGrid('navGrid', '#pager',
  155. { edit: true, add: true, del: true, search: true, refresh: true },
  156. { closeOnEscape: true, reloadAfterSubmit: true, modal: true,
  157. beforeShowForm: function (formid) {
  158. $("#pData, #nData").hide();
  159. },
  160. onInitializeForm: function (formid) {
  161.  
  162. $(formid).attr('method', 'POST');
  163. $(formid).attr('action', '');
  164. $(formid).attr('enctype', 'multipart/form-data');
  165. },
  166. test: function () {
  167.  
  168. var filenam = $("#FilePath").val();
  169. },
  170. afterSubmit: function (response, postdata) {
  171. $.ajaxFileUpload({
  172. url: '/Master/CompanyFileUpload?CompanyId=' + postdata.id,
  173. secureuri: false,
  174. data: postdata,
  175. cache: false,
  176. contentType: 'multipart/form-data',
  177. processData: false,
  178. type: 'POST',
  179. fileElementId: 'FilePath',
  180. dataType: 'json',
  181.  
  182. success: function (data, status) {
  183. // $('#notificationDiv').text("Bank Updated Successfully!");
  184. }
  185. });
  186. return true;
  187. },
  188. closeAfterEdit: true, left: 200, top: 50, width: 500,
  189.  
  190. afterShowForm: function (formid) {
  191. $('#Contact').numeric({ allow: "," });
  192. },
  193. afterComplete: function (response, postdata, formid) {
  194.  
  195. if (response.responseText == "true") {
  196.  
  197. $("#notificationDivSuccess").delay(0).fadeIn("slow");
  198. $('#notificationDivSuccess').text("Record Updated Successfully!");
  199. $("#notificationDivSuccess").delay(2500).fadeOut("slow");
  200. $('#notificationDivFail').text("");
  201. }
  202. else {
  203. $("#notificationDivFail").delay(0).fadeIn("slow");
  204. $('#notificationDivFail').text("Record Already Exist!");
  205. $("#notificationDivFail").delay(2500).fadeOut("slow");
  206. $('#notificationDivSuccess').text("");
  207. }
  208. }
  209. },
  210. { closeOnEscape: true, reloadAfterSubmit: true,
  211. closeAfterAdd: true, left: 200, top: 50, width: 500,
  212. onInitializeForm: function (formid) {
  213.  
  214. $(formid).attr('method', 'POST');
  215. $(formid).attr('action', '');
  216. $(formid).attr('enctype', 'multipart/form-data');
  217. },
  218.  
  219. afterShowForm: function (formid) {
  220. $('#Contact').numeric({ allow: "," });
  221. },
  222.  
  223. afterSubmit: function (response, postdata) {
  224. // var data = $.parseJSON(response.responseText);
  225. // bid = data.id;
  226. // pageNo = data.page;
  227. //debugger;
  228. var Id = response.responseText;
  229.  
  230. $.ajaxFileUpload({
  231. url: '/Master/CompanyFileUpload?CompanyId=' + Id,
  232. secureuri: false,
  233. data: postdata,
  234. cache: false,
  235. contentType: 'multipart/form-data',
  236. processData: false,
  237. type: 'POST',
  238. fileElementId: 'FilePath',
  239. dataType: 'json',
  240. success: function (data, status) {
  241. // $('#notificationDiv').text("Bank Added Successfully!");
  242. }
  243. });
  244. return true;
  245. }
  246. ,
  247. afterComplete: function (response, postdata, formid) {
  248.  
  249. if (response.responseText != "") {
  250. if (response.responseText == "false") {
  251. $("#notificationDivFail").delay(0).fadeIn("slow");
  252. $('#notificationDivFail').text("Record Already Exist!");
  253. $("#notificationDivFail").delay(2500).fadeOut("slow");
  254. $('#notificationDivSuccess').text("");
  255. }
  256. else {
  257. $("#notificationDivSuccess").delay(0).fadeIn("slow");
  258. $('#notificationDivSuccess').text("New Record Added Successfully!");
  259. $("#notificationDivSuccess").delay(2500).fadeOut("slow");
  260. $('#notificationDivFail').text("");
  261. }
  262.  
  263. }
  264. else {
  265. }
  266. }
  267. },
  268. { closeOnEscape: true, reloadAfterSubmit: true, left: 300, top: 80, width: 220,
  269. afterComplete: function (response, postdata, formid) {
  270. if (response.responseText == "true") {
  271. $("#notificationDivSuccess").delay(0).fadeIn("slow");
  272. $('#notificationDivSuccess').text("Record Deleted Successfully!");
  273. $("#notificationDivSuccess").delay(2500).fadeOut("slow");
  274. $('#notificationDivFail').text("");
  275. }
  276. else {
  277.  
  278. $("#notificationDivFail").delay(0).fadeIn("slow");
  279. $('#notificationDivFail').text("The selected record can not be deleted, Please delete associated record first");
  280. $("#notificationDivFail").delay(2500).fadeOut("slow");
  281. $('#notificationDivSuccess').text("");
  282. }
  283. }
  284. },
  285. { closeAfterSearch: true, closeOnEscape: true, left: 200, top: 50, enableClear: true,
  286. onClose: function () {
  287. var postdata = $("#grid").jqGrid('getGridParam', 'postData');
  288. postdata._search = false;
  289. postdata.searchString = "";
  290. $("#grid").trigger('reloadGrid');
  291. return true;
  292. }
  293.  
  294. });
  295.  
  296. });
  297.  
  298. var $mygrid= jQuery("#list").jqGrid({
  299. url:'example.php',
  300. editurl: 'edit.php',
  301. datatype: 'xml',
  302. mtype: 'GET',
  303. colNames:['Seq','Name', 'ID','Pass','Mail','Note'],
  304. colModel :[
  305. {name:'seq',index:'seq', width:55, resizable:false, editable:true, editoptions:{readonly:true,size:10}},
  306. {name:'name',index:'name', width:90,resizable:false, editable:true, editoptions:{readonly:false,size:10}},
  307. {name:'id',index:'id', width:80, align:'right', editable:true, editoptions:{readonly:false,size:10}},
  308. {name:'pass',index:'pass', width:80, align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
  309. {name:'mail',index:'mail', width:80,align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
  310. {name:'id',index:'id', width:150, sortable:false} ],
  311. pager: jQuery('#pager'),
  312. rowNum:10,
  313. rowList:[10,20,30,50],
  314. sortname: 'seq',
  315. sortorder: "Asc",
  316. width: 1000,
  317. height: 230,
  318. viewrecords: true,
  319. multiselect: true,
  320. editable: true,
  321. toolbar: [true,"top"],
  322. multikey: "ctrlKey",
  323. caption: 'staff'
  324.  
  325.  
  326. });
  327. $("#list").jqGrid('navGrid', '#pager', {
  328. edit: true,
  329. add: true,
  330. del: true,
  331. search: false,
  332. refresh:false
  333. })
  334.  
  335. if($_GET['oper']=='add')
  336. {
  337. ... ... ...
  338. }
  339. if($_GET['oper']=='edit')
  340. {
  341. ... ... ...
  342. }
  343. if($_GET['oper']=='del')
  344. {
  345. ... ... ...
  346. }
  347.  
  348. if($_POST['oper']=='add')
  349. {
  350. ... ... ...
  351. }
  352. else if($_POST['oper']=='edit')
  353. {
  354. ... ... ...
  355. }
  356. else if($_POST['oper']=='del')
  357. {
  358. ... ... ...
  359. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!