jqgrid中edittype为text、CheckBox、select、textarea、function等,为jqgrid添加自定义按钮
2017-08-14 14:07
417 查看
<script type="text/javascript"> /********获取贸易商名称下拉列表*************/ function getVal(){ var nameVal = ""; var i = 0; $.ajax({ type : "GET", async : false, url : "trader_queryPageTrader.do", //向后台请求数据 success : function(result){ var result = eval('('+ result +')'); var resultContent = result.root; for(i; i < resultContent.length; i++){ if(i != resultContent.length - 1){ nameVal += resultContent[i].traderName + ":" + resultContent[i].traderName + ";"; }else{ nameVal += resultContent[i].traderName + ":" + resultContent[i].traderName; } } } }); return nameVal; } /********取大宗物资网合同号**********/ $.ajax({ async:false, cache:true, type: "POST", url: "goodsDzContract_queryDzPurchaseNum.do", //向后台请求数据 success: function(result){ var result = eval('('+ result +')'); if(result != undefined && result.length > 0){ for ( var i = 0; i < result.length; i++) { var opt = "<option value='" + result[i].purchaseNum + "'>" + result[i].purchaseNum + "</option>"; $("#DzContractNum").append(opt); } } }, error: function() { alert("获取大宗物资网合同号失败") } }); /*********绑定合同号弹出框************/ function bindAttachment(id){ var rowData = $("#grid-table").jqGrid('getRowData',id); var goodsOrder = rowData.goodsOrder; var goodsPackage = rowData.goodsPackage; $("#orderId1").val(goodsOrder); //订单号:document.getElementById("orderId").value = goodsOrder; $("#bindContractDialog").dialog({ autoOpen:true, height:300, width:330, resizable:false, modal:true, //这里就是控制弹出为模态 buttons:{ "确定":function(){ var id = rowData.id; var dzPurchaseContractNum = $("#DzContractNum2").val(); //向后台提交数据 $.ajax({ async:false, cache:true, type: "POST", data:{ id:id, dzPurchaseContractNum:dzPurchaseContractNum, }, url: "goods_boundContractNum.do", //获取json数据 success: function(){ alert("绑定合同号成功"); window.location.href = "./traderGoodsInfo.html"; }, error: function() { alert("绑定合同号失败") } }); $(this).dialog("close"); }, "取消":function(){$(this).dialog("close");} } }); } /******* 上传附件弹出框 ********/ function uploadAttachment(id) { var rowData = $("#grid-table").jqGrid('getRowData',id); var goodsOrder = rowData.goodsOrder; var goodsId = rowData.id; $("#goodsId").val(goodsId); $("#orderId2").val(goodsOrder); //订单号:document.getElementById("orderId").value = goodsOrder; $("#uploadFileDialog").dialog({ autoOpen:true, height:365, width:400, resizable:false, modal:true //这里就是控制弹出为模态 }); } /**********添加多文件上传************/ function plusFile(){ //<input type='button' value='删除' onclick='deleteCurrent(this)' style='display:inline;'/> $("#otherFile").append("<p style='margin-top:-2px;'><input type='file' name='file' style='display:inline; width:180px;'/><button type='button' class='btn btn-danger btn-xs' style='border-radius:4px; margin-top:-5px;' onclick='deleteCurrent(this)'><i class='icon-trash icon-on-right bigger-110'></i>删除</button></p>"); } /**********删除多文件上传***********/ function deleteCurrent(obj){ $(obj).parent().remove(); } var grid_data = [ {id:"1",name:"张三",note:"长文本1",stock:"是",ship:"一年级", sdate:"2007-12-03"}, {id:"2",name:"李四",note:"长文本2",stock:"否",ship:"二年级",sdate:"2007-12-03"}, {id:"3",name:"王二",note:"长文本3",stock:"否",ship:"五年级",sdate:"2007-12-03"}, {id:"4",name:"小五",note:"长文本4",stock:"是",ship:"四年级",sdate:"2007-12-03"}, {id:"5",name:"六六",note:"长文本5",stock:"是",ship:"三年级",sdate:"2007-12-03"}, {id:"6",name:"九儿",note:"长文本6",stock:"否", ship:"六年级",sdate:"2007-12-03"}, {id:"7",name:"石榴",note:"长文本7",stock:"是",ship:"一年级",sdate:"2007-12-03"}, {id:"8",name:"一一",note:"长文本8",stock:"否",ship:"三年级",sdate:"2007-12-03"} ]; jQuery(function($) { var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; jQuery(grid_selector).jqGrid({ //direction: "rtl", data: grid_data, datatype: "local", height: 400, /****列显示名称******/ colNames:[' ', '绑定及上传', 'id','日期','名称', '复选框', '下拉框', '备注', '超链接1', '超链接2', '上传照片'], /********************************* 常用到的属性:name:列显示的名称;index:传到服务器端用来排序用的列名称;width:列宽度;align:对齐方式;sortable:是否可以排序 edittype:可以编辑的类型。可选值:text, textarea, select, checkbox, password, button, image, file。 默认为text。 unformat:可以为formatter指定自定义格式的方法,比如:pickDate, aceSwitch, function, null ************************************/ colModel:[ {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{ keys:true, delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback}, } }, {name:'myac222',index:'', width:80, fixed:true, sortable:false, resize:false, formatter: function (value, grid, rows, state) { return "<a href=\"#\" title=\"绑定合同\" style=\"margin-left:10px\" onclick=\"bindAttachment(" + rows.id + ")\"><i class=\"icon-cogs purple\" style=\"font-size:15px\"></i></a><a href=\"#\" style=\"margin-left:12px\" title=\"上传计划单\" onclick=\"uploadAttachment(" + rows.id + ")\"><i class=\"icon-cloud-upload blue\" style=\"font-size:15px\"></i></a>"; } }, /******此id一般为数据库中的主键,一般不显示出来*********/ /******字段隐藏及显示问题: 1.新增或展示时都不显示字段:hidden: true 2.新增时显示,展示时不显示:editrules: {edithidden: true}, hidden:true 3.新增时不显示,展示时显示:editable: false ************/ {name:'id', index:'id', width:60, sorttype:"int", editable: true, hidden:true}, /******unformat: pickDate 此处使用了datepicker插件来显示时间******/ {name:'sdate', index:'sdate', width:60, editable:true, sorttype:"date", unformat: pickDate}, /*******默认edittype为text**************/ {name:'name', index:'name', width:60, editable: true, editoptions:{size:"20", maxlength:"30"}}, /*******edittype:"checkbox", editoptions:{value:"是:否"} 复选框。 unformat:aceSwitch 自定义设置复选框样式***********/ {name:'stock', index:'stock', width:60, editable: true, edittype:"checkbox", editoptions:{value:"是:否"}, unformat:aceSwitch}, /*******edittype:"select", editoptions:{value: "一:一年级;二:二年级;三:三年级"} 下拉框第一种赋值方法,特别注意下拉框最后一行内容后面不能有分号";",否则下拉内容会多出一个undefined************/ /*******edittype:"select", editoptions:{value: {1:'在用', 2:'空闲', 3:'故障'}} 下拉框第二种赋值方法*******/ /*******edittype:"select", editoptions:{value: getVal()} 下拉框第三种赋值方法,然后再实现getVal()方法,以返回此下拉框内容*************/ {name:'ship', index:'ship', width:60, editable: true, edittype:"select", editoptions:{value:"一:一年级;二:二年级;三:三年级;四:四年级;五:五年级;六:六年级"}}, /*******edittype:"textarea", editoptions:{rows:"2",cols:"10"}*******/ {name:'note', index:'note', width:60, sortable:false, editable:true, edittype:"textarea", editoptions:{rows:"2",cols:"10"}}, /*******formatter:function(cellvalue, options, rowObject){return "<a href=\"../index.html\">监控</a>";} 超链接跳转页面,也可以在gridComplete中循环为每一行添加超链接,此时还可以给跳转页面传递参数****/ {name:'monitor',index:'monitor', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../index.html\">监控</a>";}}, /*******在gridComplete中循环为每一行添加超链接,此时还可以给跳转页面传递参数*********/ {name:'detail',index:'detail', width:60, sortable:false, editable:false}, {name:'myac111',index:'', width:120, fixed:true, sortable:false, resize:false, align: "center", formatter: function (value, grid, rows, state) { return "<a href=\"#\" title=\"上传司机照片\" style=\"margin-left:10px\" onclick=\"uploadAttachment(" + rows.id + ")\"><i class=\"icon-cloud-upload blue\" style=\"font-size:15px\"></i></a>"; } }, ], rownumbers: true, //添加左侧行号 viewrecords : true, rowNum:10, rowList:[10,20,30], pager : pager_selector, altRows: true, //toppager: true, multiselect: true, //multikey: "ctrlKey", multiboxonly: true, gridComplete:function(){ //在此事件中循环为每一行添加修改和删除链接 var ids=jQuery("#grid-table").jqGrid('getDataIDs'); //获取单个id for(var i = 0; i<ids.length; i++){ var id = ids[i]; //var rowData = $("#grid-table").jqGrid('getRowData',id); //var goodsStatus = rowData.goodsStatus; details = '<a href="../index.html?id='+id+'&goodsStatus=2">查看附件</a>'; //向跳转页面传递参数 jQuery("#grid-table").jqGrid('setRowData', ids[i], { detail: details}); } }, loadComplete : function() { var table = this; setTimeout(function(){ styleCheckbox(table); updateActionIcons(table); updatePagerIcons(table); enableTooltips(table); }, 0); }, editurl: "",//nothing is saved caption: "测试列表", autowidth: true }); //switch element when editing inline function aceSwitch( cellvalue, options, cell ) { setTimeout(function(){ $(cell) .find('input[type=checkbox]') .wrap('<label class="inline" />') .addClass('ace ace-switch ace-switch-5') .after('<span class="lbl"></span>'); }, 0); } //enable datepicker function pickDate( cellvalue, options, cell ) { setTimeout(function(){ $(cell) .find('input[type=text]') .datepicker({format:'yyyy-mm-dd' , autoclose:true}); }, 0); } //navButtons jQuery(grid_selector).jqGrid('navGrid',pager_selector, { //navbar options edit: true, editicon : 'icon-pencil blue', add: true, addicon : 'icon-plus-sign purple', del: true, delicon : 'icon-trash red', search: true, searchicon : 'icon-search orange', refresh: true, refreshicon : 'icon-refresh green', view: true, viewicon : 'icon-zoom-in grey', }, { //edit record form //closeAfterEdit: true, recreateForm: true, beforeShowForm : function(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_edit_form(form); }, afterComplete: function(e) { alert("修改成功!"); location.reload(); } }, { //new record form closeAfterAdd: true, recreateForm: true, viewPagerButtons: false, beforeShowForm : function(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_edit_form(form); }, afterComplete: function(e) { alert("增加成功!"); location.reload(); } }, { //delete record form recreateForm: true, beforeShowForm : function(e) { var form = $(e[0]); if(form.data('styled')) return false; form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_delete_form(form); form.data('styled', true); }, onClick : function(e) { alert(1); }, afterComplete: function(e) { alert("删除成功!"); location.reload(); } }, { //search form recreateForm: true, afterShowSearch: function(e){ var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />') style_search_form(form); }, afterRedraw: function(){ style_search_filters($(this)); } , multipleSearch: true, /** multipleGroup:true, showQuery: true */ }, { //view record form recreateForm: true, beforeShowForm: function(e){ var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />') } } ).navSeparatorAdd(pager_selector, //navSeparatorAdd是增加一个|进行按钮分割. {sepclass : "ui-separator",sepcontent: ''} ).navButtonAdd(pager_selector,{ /************** caption:按钮名称,可以为空,string类型 buttonicon:按钮的图标,string类型,必须为UI theme图标 onClickButton:按钮事件,function类型,默认null position:first或者last,按钮位置 title:string类型,按钮的提示信息 cursor:string类型,光标类型,默认为pointer id:string类型,按钮id *********************/ //绑定合同号按钮 caption:"", title:"绑定合同", buttonicon : 'icon-cogs purple', onClickButton: function() { var id = $("#grid-table").jqGrid('getGridParam', 'selrow'); if (id == null){ alert("请选择一条记录"); } else { bindAttachment(id); } } }).navButtonAdd(pager_selector,{ //上传文件按钮 caption:"", title:"上传计划单", buttonicon : 'icon-cloud-upload blue', onClickButton: function() { var id = $("#grid-table").jqGrid('getGridParam', 'selrow'); if (id == null){ alert("请选择一条记录"); } else { uploadAttachment(id); } } }) function style_edit_form(form) { //enable datepicker on "sdate" field and switches for "stock" field form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true}) .end().find('input[name=stock]') .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>'); //update buttons classes var buttons = form.next().find('.EditButton .fm-button'); buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>'); buttons.eq(1).prepend('<i class="icon-remove"></i>') buttons = form.next().find('.navButton a'); buttons.find('.ui-icon').remove(); buttons.eq(0).append('<i class="icon-chevron-left"></i>'); buttons.eq(1).append('<i class="icon-chevron-right"></i>'); } function style_delete_form(form) { var buttons = form.next().find('.EditButton .fm-button'); buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>'); buttons.eq(1).prepend('<i class="icon-remove"></i>') } function style_search_filters(form) { form.find('.delete-rule').val('X'); form.find('.add-rule').addClass('btn btn-xs btn-primary'); form.find('.add-group').addClass('btn btn-xs btn-success'); form.find('.delete-group').addClass('btn btn-xs btn-danger'); } function style_search_form(form) { var dialog = form.closest('.ui-jqdialog'); var buttons = dialog.find('.EditTable') buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet'); buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt'); buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search'); } function beforeDeleteCallback(e) { var form = $(e[0]); if(form.data('styled')) return false; form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_delete_form(form); form.data('styled', true); } function beforeEditCallback(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_edit_form(form); } //it causes some flicker when reloading or navigating grid //it may be possible to have some custom formatter to do this as the grid is being created to prevent this //or go back to default browser checkbox styles for the grid function styleCheckbox(table) { /** $(table).find('input:checkbox').addClass('ace') .wrap('<label />') .after('<span class="lbl align-top" />') $('.ui-jqgrid-labels th[id*="_cb"]:first-child') .find('input.cbox[type=checkbox]').addClass('ace') .wrap('<label />').after('<span class="lbl align-top" />'); */ } //unlike navButtons icons, action icons in rows seem to be hard-coded //you can change them like this in here if you want function updateActionIcons(table) { /** var replacement = { 'ui-icon-pencil' : 'icon-pencil blue', 'ui-icon-trash' : 'icon-trash red', 'ui-icon-disk' : 'icon-ok green', 'ui-icon-cancel' : 'icon-remove red' }; $(table).find('.ui-pg-div span.ui-icon').each(function(){ var icon = $(this); var $class = $.trim(icon.attr('class').replace('ui-icon', '')); if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]); }) */ } //replace icons with FontAwesome icons like above function updatePagerIcons(table) { var replacement = { 'ui-icon-seek-first' : 'icon-double-angle-left bigger-140', 'ui-icon-seek-prev' : 'icon-angle-left bigger-140', 'ui-icon-seek-next' : 'icon-angle-right bigger-140', 'ui-icon-seek-end' : 'icon-double-angle-right bigger-140' }; $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){ var icon = $(this); var $class = $.trim(icon.attr('class').replace('ui-icon', '')); if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]); }) } function enableTooltips(table) { $('.navtable .ui-pg-button').tooltip({container:'body'}); $(table).find('.ui-pg-div').tooltip({container:'body'}); } //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow'); }); </script>
相关文章推荐
- jqgrid表格列选项edittype为text、checkbox、select、textarea、function、超链接,添加自定义按钮
- jqgrid表格列选项edittype为text、checkbox、select、textarea、function、超链接,添加自定义按钮
- jQuery获取form中Select/textarea/checkbox/radio选择的Text和Value等其他常见操作
- JQuery操作 text,select,textarea,radio,checkbox
- JQuery操作 text,select,textarea,radio,checkbox
- JavaScript当中网页刷新后数值(text、radio、checkbox、select、textarea)保持不变(输入域数据保持)的简单方法
- [WORDPRESS系列]在主题的 function.php 中给 WordPress 编辑器添加自定义按钮(Quicktags)
- jqgrid 在表格底部添加自定义按钮
- jqGrid添加自定义按钮
- Jqgrid添加自定义按钮
- Call to a member function GetInnerText() on a non-object dede 添加自定义字段后 文章列表页生成失败 list
- JQuery操作textarea,input,select,checkbox方法
- TextView的一些高级应用(自定义字体、显示多种颜色、添加阴影)
- CheckBoxList与SELECT 添加删除 ,置顶,上移,下移,置底
- JQUERY 获取form表单text,areatext,radio,checkbox,select值 以及 JavaScrpt获取文本框值
- 实现UE添加自定义按钮之添加菜单
- jqgrid自定义checkbox
- FCK添加自定义按钮(分页按钮)
- LayoutInflater作用及使用--自定义EditText,自带清除内容按钮
- IOS 自定义tabBar的按钮添加点击放大缩小的动画