前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jqGrid在编辑行时获取行数据方式以及自定义 select 的用法

jqGrid在编辑行时获取行数据方式以及自定义 select 的用法

作者头像
zcqshine
发布2018-05-11 16:24:40
2.2K0
发布2018-05-11 16:24:40
举报
文章被收录于专栏:zcqshine's blog

javaScript代码

代码语言:javascript
复制
<script type="text/javascript">
    function myelem (value,options){
         //创建 select 元素
        var el = document.createElement("select");
        if(value){  //编辑时
            //获取被编辑列id
            var id = $("#jqGrid").jqGrid('getGridParam','selrow');
            //根据 id 获取行数据对象
            var rowDatas = $("#jqGrid").jqGrid('getRowData',id);
            //获取物品 id
            var goodsId = rowDatas["goodsId"];
            //获取物品名称
            var goodsName = rowDatas['goodsName'];
            el.options[0] = new Option(goodsName, goodsId);
        }else{  //新增时
            el.options[0] = new Option("金币", 1);
        }
        return el;
    }

    function myValue(elem,operation, value){
        if(operation == 'get'){
            return $(elem).val();
        }else if(operation == 'set'){
            $('select',elem).val(value);
        }
    }

//获取物品列表填充物品下拉列表数据
function getGoodsList(){
        var goodsType = $("#goodsType").val();
        var url = "";
        if(goodsType <= 2){
            url = "xxx";
        }
        if(goodsType == 3){
            url = "xxx";
        }

        $.post(url,{"type":goodsType},function(data,textStatus){
            var options = "";
            if(data.length > 0){
                for(var i=0; i < data.length; i++){
                    options += "<option value=\"" +data[i].id+ "\">" + data[i].zhName + "</option>";
                }
                $("#goodsId").html(options);
            }
        },"json");
    }
</script>

jqGrid 表格部分代码

代码语言:javascript
复制
jQuery(grid_selector).jqGrid({
            url : 'xxx',
            datatype : 'json',
            mytype : 'POST',
            height: 400,
            colModel:[
                {label:"ID",name:'id',index:'id',sorttype:'int',editable:false,width:50
                {
                    label: '商品类型', name: 'goodsType', index: 'goodsType',
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == 1) {
                            return "金币";
                        }
                        if (cellvalue == 2) {
                            return "道具";
                        }
                        if (cellvalue == 3) {
                            return "礼包";
                        }
                    },
                    autowidth:true, editable: true, edittype: 'select',
                    editoptions: {value:"1:金币;2:道具;3:礼包", dataEvents:[{type:'change',fn:function(){getGoodsList();}}]},
                    sorttype:'int',
                    stype:'select',searchoptions:{value:"1:金币;2:道具;3:礼包"}

                },

                {label:'物品或礼包',name:'goodsId',index:'goodsId',hidden:true,edittype:'custom',
                    editoptions:{custom_element: myelem, custom_value:myValue},
                    autowidth:true,editable:true,
                    editrules:{edithidden:true,required:true},viewable:false},
                {label:'物品名称',name:'goodsName',index:'goodsName',autowidth:true,sortable:false,editable:false,viewable:true},
                {label:'礼包名称',name:'giftName',index:'giftName',autowidth:true,sortable:false,editable:false,viewable:true},
                {label:'状态',name:'status',index:'status',
                    formatter:function(cellvalue,options,rowObject){
                        if(cellvalue == 1){
                            return "有效";
                        }
                        if(cellvalue == 0){
                            return "无效";
                        }
                    },
                    editable:true,edittype:'select',editoptions:{value:"1:有效;0:无效"},autowidth:true,
                    stype:'select',searchoptions:{value:"1:有效;0:无效"}

                },
                {label:'操作',name:'myac', index:'', autowidth:true, fixed:true, sortable:false,resize:true,viewable:false,search:false,
                    formatter:'actions',
                    formatoptions:{
                        keys:false,
                        delbutton:false,
                        editformbutton:true,
                        editOptions:{
                            recreateForm:true,
                            beforeShowForm:beforeEditCallback,
                            closeAfterEdit: true
                        },
                        delOptions:{
                            recreateForm: true, beforeShowForm:beforeDeleteCallback
                        }
                    }
                }
            ],
            jsonReader:{repeatitems:false},
            viewrecords:true,
            rowNum:20,
            rowList:[10,20,30,50,100],
            pager:pager_selector,
            altRows:true,
            loadtext:'正在加载数据...',
            multiselect:true,
            multiboxonly:true,
            loadComplete:function(){
                var table = this;
                setTimeout(function(){
                    updatePagerIcons(table);
                    enableTooltips(table);
                },0);
            },
            edit url:'xxx',
            caption:"商品列表",
            autowidth:true
        });
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档