jqgrid表格列选项edittype为text、checkbox、select、textarea、function、超链接，添加自定义按钮

来源：互联网发布：麻纱布料淘宝编辑：程序博客网时间：2024/05/21 18:39

jqgrid数据来源：

①当为静态数据时，可直接在页面中定义，例如：

[html] view plain copy
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"}  
            ];  

②当为动态数据时，需利用ajax从后台获取数据，例如：

[html] view plain copy
var grid_data = [];  

[html] view plain copy
/**************从后台获取贸易商数据********************/      
            $.ajax({  
                async:false,  
                cache:false,  
                url: "goods_findPageGoodsByTrader.do",  
                data: dataStr,<span style="white-space:pre">    </span>//需要向后台传递的参数  
                type: 'GET',  
                success: function(result){  
                    var result = eval('('+ result +')');  
                    if(result.root != undefined && result.root.length > 0){  
                        var resultContent = result.root;  
                        var grid_child;  
                        for ( var i = 0; i < resultContent.length; i++) {  
                            grid_child = {id:resultContent[i].goodsId,   
                                    goodsOrder:resultContent[i].goodsOrder, goodsPackage:resultContent[i].goodsPackage, goodsName:resultContent[i].goodsName,  
                                    goodsType:resultContent[i].goodsType, goodsMaterial:resultContent[i].goodsMaterial, goodsNumber:resultContent[i].goodsNumber, goodsWeight:resultContent[i].goodsWeight,   
                                    goodsWarranty:resultContent[i].goodsWarranty, goodsOrigin:resultContent[i].goodsOrigin, originName:resultContent[i].originName, goodsStatus:resultContent[i].goodsStatus,  
                                    goodsContractreadtime:resultContent[i].goodsContractreadtime, dzPurchaseContractNum:resultContent[i].dzPurchaseContractNum, groupPurchaseContractNum:resultContent[i].groupPurchaseContractNum};  
                            grid_data[i] = grid_child;      
                        }  
                    }  
                },  
                error:function(e){alert("获取贸易商物资信息失败");}  
            });  

设置列名称：

[html] view plain copy
/****列显示名称******/  
                    colNames:[' ', '绑定及上传', 'id','日期','名称', '复选框', '下拉框', '备注', '超链接1', '超链接2', '上传照片'],  

edittype的各种形式：

①jqgrid表格列默认为text：

[html] view plain copy
{name:'id', index:'id', width:60, sorttype:"int", editable: true, hidden:true},  

②jqgrid表格列设置为时间格式，并且利用datepicker时间插件，例如：

[html] view plain copy
/*****unformat可以为formatter指定自定义格式的方法*****/  
                        /******unformat: pickDate   此处使用了datepicker插件来显示时间******/  
                        {name:'sdate', index:'sdate', width:60, editable:true, sorttype:"date", unformat: pickDate},  

此时，pickDate需自己定义，例如：

[html] view plain copy
function pickDate( cellvalue, options, cell ) {  
                    setTimeout(function(){  
                        $(cell) .find('input[type=text]')  
                                .datepicker({format:'yyyy-mm-dd' , autoclose:true});   
                    }, 0);  
                }  

③jqgrid表格列设置为checkbox复选框，例如：

[html] view plain copy
/*******edittype:"checkbox", editoptions:{value:"是:否"}  复选框。   unformat:aceSwitch 自定义设置复选框样式***********/  
                        {name:'stock', index:'stock', width:60, editable: true, edittype:"checkbox", editoptions:{value:"是:否"}, unformat:aceSwitch},  

此处，checkbox复选框样式利用了ace模板的样式，需自定义其样式，例如：

[html] view plain copy
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);  
                }  

④jqgrid表格列设置为select下拉框，例如：

方法一，字符串形式：

[html] view plain copy
{name:'ship', index:'ship', width:60, editable: true, edittype:"select", editoptions:{value:"一:一年级;二:二年级;三:三年级;四:四年级;五:五年级;六:六年级"}},  

方法二，对象形式：

[html] view plain copy
{name:'ship', index:'ship', width:60, editable: true, edittype:"select", editoptions:{value:{一:'一年级', 二:'二年级', 三:'三年级'}<span style="font-family: Arial, Helvetica, sans-serif;">},</span>  

方法三，调用函数返回形式：

[html] view plain copy
{name:'ship', index:'ship', width:60, editable: true, edittype:"select", editoptions:{value: getVal()},  

此时需要自定义这里的getVal()函数，以返回下拉框中的内容，例如：

[html] view plain copy
/********获取贸易商名称下拉列表*************/  
            function getVal(){  
                var originNameVal = "";  
                var i = 0;  
                $.ajax({  
                    type : "GET",  
                    async : false,  
                    data: dataStr,  
                    url : "trader_queryPageTrader.do",<span style="white-space:pre">    </span>//从后台获取数据  
                    success : function(result){  
                        var result = eval('('+ result +')');  
                        var resultContent = result.root;  
                        for(i; i < resultContent.length; i++){  
                            if(i != resultContent.length - 1){  
                                originNameVal += resultContent[i].traderName + ":" + resultContent[i].traderName + ";";  
                            }else{  
                                originNameVal += resultContent[i].traderName + ":" + resultContent[i].traderName;  
                            }  
                        }    
                    }  
                });  
                return originNameVal;  
            }  

⑤jqgrid表格列设置为textarea，例如：

[html] view plain copy
{name:'note', index:'note', width:60, sortable:false, editable:true, edittype:"textarea", editoptions:{rows:"2",cols:"10"}},  

⑥jqgrid表格列设置为超链接：

方法一：

[html] view plain copy
{name:'monitor',index:'monitor', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../index.html\">监控</a>";}},  

方法二，在表格加载完成时，为每一列设置超链接，例如：

[html] view plain copy
{name:'detail',index:'detail', width:60, sortable:false, editable:false},  

[html] view plain copy
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});  
                              
                        }   
                    },  

这里，获取jqgrid表格行id为：

[html] view plain copy
var ids=jQuery("#grid-table").jqGrid('getDataIDs');  

获取到的id是一个数组。

获取jqgrid表格行数据为：

[html] view plain copy
var rowData = $("#grid-table").jqGrid('getRowData',id);  

获取到的行数据是一个对象。

此时，若想取出行数据中的某一个字段，应该是：

[html] view plain copy
var goodsStatus = rowData.goodsStatus;  

法二是先规定一个超链接的样式，例如：

[html] view plain copy
details = '<a href="../index.html?id='+id+'&goodsStatus=2">查看附件</a>';  

然后为每一行的此字段，都设置这个超链接样式，例如：

[html] view plain copy
jQuery("#grid-table").jqGrid('setRowData', ids[i], { detail: details});  

⑦jqgrid表格列设置为自定义按钮，例如：

[html] view plain copy
{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>";   
                            }  
                        },  

以绑定合同为例，当点击“绑定合同”自定义按钮时，将触发bindAttachment(id)事件，从而打开自定义的绑定合同dialog对话框，如下：

[html] view plain copy
<!-- 绑定合同号dialog  -->  
                                <div id="bindContractDialog" title="绑定合同号" style="display:none;">  
                                    <table class="exhibit_table">    
                                        <tr>    
                                            <td style="width:80px; padding:10px;" align="right">订单号</td>    
                                            <td class="input-icon input-icon-right">  
                                                <input type="text" id="orderId1" name="orderId"/>  
                                                <i class="icon-edit green" style="margin-top:5px;"></i>  
                                            </td>  
                                        </tr>  
                                        <tr>    
                                            <td style="width:80px; padding:10px;" align="right">大宗物资网合同号</td>    
                                            <td class="input-icon input-icon-right">  
                                                <span style="margin-left:160px; width:25px; overflow:hidden;"><select id="DzContractNum" name="dzContractNum" style="width:185px; margin-left:-160px;" onchange="this.parentNode.nextSibling.value=this.value">  
                                                    </select>  
                                                </span><input id="DzContractNum2" name="DzContractNum" style="width:160px; height:30px; position:absolute; left:0px;">  
                                            </td>    
                                        </tr>    
                                    </table>   
                                </div>  

这里要注意，大宗物资网合同号是一个下拉框，且这个下拉框不仅支持下拉，而且支持用户输入，原理是，将下拉框和input输入框重叠在一起，且在下拉框中加入onchange事件，事件触发操作为：

[html] view plain copy
<pre code_snippet_id="2533383" snippet_file_name="blog_20170814_25_7673218" name="code" class="html">onchange="this.parentNode.nextSibling.value=this.value"</pre>  
<pre></pre>  
<p></p>  
<pre></pre>  
所以<select>与其父节点<span>之间不能有空格或换行符，否则浏览器会将空格或换行符识别为<span>的父节点，将不会出现下拉框可输入的效果。  
<p></p>  
<p>然后从后台获取下拉框的内容，如下：</p>  
<p></p>  
<pre code_snippet_id="2533383" snippet_file_name="blog_20170814_26_5371924" name="code" class="html">/********取大宗物资网合同号**********/  
            $.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("获取大宗物资网合同号失败")    
                }    
            });</pre><br>  
<p></p>  
<p>定义好dialog的样式后，再定义bindAttachment(id)事件，此事件能将此dialog打开，供用户输入，如下所示：</p>  
<p></p>  
<pre code_snippet_id="2533383" snippet_file_name="blog_20170814_27_770119" name="code" class="html">/*********绑定合同号弹出框************/  
            function bindAttachment(id){  
                var rowData = $("#grid-table").jqGrid('getRowData',id);  
                var goodsOrder = rowData.goodsOrder;  
                $("#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");}   
                    }  
                });  
            }</pre><br>  
样式如下图所示：  
<p></p>  
<p><img src="http://img.blog.csdn.net/20170814155147060?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjcyNDU5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br>  
<br>  
<br>  
在翻页条添加自定义按钮：</p>  
<p>①添加一个“|”分隔符，如下：</p>  
<p></p>  
<pre code_snippet_id="2533383" snippet_file_name="blog_20170814_28_8120159" name="code" class="html">jQuery(grid_selector).jqGrid().navSeparatorAdd(pager_selector,             //navSeparatorAdd是增加一个|进行按钮分割.  
                        {sepclass : "ui-separator",sepcontent: ''}  
                )</pre><br>  
②添加自定义按钮，当点击按钮时，弹出绑定合同的dialog对话框，如下：  
<p></p>  
<p></p>  
<pre code_snippet_id="2533383" snippet_file_name="blog_20170814_29_3867018" name="code" class="html">jQuery(grid_selector).jqGrid().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);<span style="white-space:pre">   </span>//调用bindAttachment(id)函数以弹出dialog对话框  
                        }  
                    }  
                })</pre><br>  
效果如下图所示：  
<p></p>  
<p><img src="http://img.blog.csdn.net/20170814160405077?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjcyNDU5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></p>  
<p>至此，jqgrid两种添加自定义按钮的方式（为jqgrid表格的某一字段的每一行添加自定义按钮、在翻页条添加自定义按钮）都已完成。<br>  

阅读全文

0 0