Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jqGrid在编辑行时获取行数据方式以及自定义 select 的用法

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

作者头像
zcqshine
发布于 2018-05-11 08:24:40
发布于 2018-05-11 08:24:40
2.3K00
代码可运行
举报
文章被收录于专栏:zcqshine's blogzcqshine's blog
运行总次数:0
代码可运行

javaScript代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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
代码运行次数:0
运行
AI代码解释
复制
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ajaxFileUpload+ThinkPHP+jqGrid 图片上传与显示
jqgrid上要显示图片和上传图片的列,格式如下: {label:'图片',name:'icon',index:'icon',autowidth:true,formatter:alarmFormatter,editable:true,edittype:'custom', editoptions:{custom_element: ImgUpload, custom_value:GetImgValue}}, 注意:edittype要为custom 也就是自定义编辑格式. editoptions:{custom_
zcqshine
2018/05/11
2.4K0
salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建
该文讲述了如何利用Javascript实现一个数据分页的功能。通过获取页面中表格的每一行数据,并请求服务器进行数据筛选和排序。同时,该文也详细描述了如何在VF页面中编写对应的逻辑,并通过AJAX方式将数据返回到页面中。该文还讲述了如何为表格添加自定义排序和筛选功能,并通过示例代码进行说明。
Zero-Zhang
2018/01/05
1.8K0
salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建
layui 下拉列表触发事件 获取自定义属性
由于 layui 框架的覆盖性,我们是无法使用传统 js、jQuery 的写法的,比如: $("#toSelGoodsID").change(function(){) html 核心代码: <div class="layui-input-inline"> <select id="toSelGoodsID" lay-filter="toSelGoodsID" lay-verify="required" lay-search="">
泥豆芽儿 MT
2019/04/01
5.6K0
BootstrapTable 行内编辑解决方案:bootstrap-table-editor
最近开发的一个业务平台,是一个低代码业务平台。其中用到的了bootstrap-table组件。但是bootstrap-table自身不带编辑功能。 通过搜索发现,网上大部分的解决方案都是使用x-editable, x-editable是一个通用的编辑能力组件,可以给任何元素都加上编辑能力,功能强大,可以编辑文本,数字,选项,时间等等各种类型的数据。
用户3158888
2022/03/22
1.4K0
BootstrapTable 行内编辑解决方案:bootstrap-table-editor
可以添加自定义的Select控件
1.控件dom <select name="WebSiteTarget" id="WebSiteTarget" class="w1" onchange="editable2(this);"> <option value="-1">请选择城市</option> <option>福州</option> <option>厦门</option> <option>南平</option> <option value="0">(自定义输入)</option> </select> 2
用户1055830
2018/01/18
9850
可以添加自定义的Select控件
自用插件整理之表格bootstrap-table
本插件基于bootstrap,网上各种例子也比较多,本文就不详细列api一类的了,只将自己常用的记录一下。多数代码中存在的注释,就不再重写。
WindCoder
2018/09/20
3.2K0
自用插件整理之表格bootstrap-table
封装element-ui表格,我是这样做的
使用过element-ui的表格的同学应该都有这样的体会,做一个简单的表格还比较容易,但如果这个表格包含了顶部的按钮,还有分页,甚至再包含了行编辑,那开发工作量就成倍的增加,特别是在开发管理系统的时候,表格一个接一个的去开发, 即浪费时间,还对个人没有什么提升。今天小编带来了自己封装的一个表格,让你用JSON就可以简单的生成表格。
前端进击者
2021/07/27
1.5K0
salesforce 零基础学习(六十)Wizard样式创建数据
项目中表之间关联关系特别多,比如三个表中A,B,C  C作为主表,A,B作为从表,有时候C表需要创建数据时,同时需要创建A,B两个表的数据,这种情况下,使用Wizard样式会更加友好。 以Goods_
Zero-Zhang
2018/01/05
9190
salesforce 零基础学习(六十)Wizard样式创建数据
vuedraggable自由拖拽_vue可视化拖拽编辑
最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入
全栈程序员站长
2022/09/20
2.1K0
完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
  例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多就是列的位置和宽度。非常麻烦,而且还会不停的变。最好的方式把这个功能放给用户,让用户自己去调整,并保存在本地,这样就不需要每次做调整了。
阿新
2019/10/09
1.7K0
完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
easyui常用组件
表单 日期选择(html初始化) <input name="tadminModel.birthday" class="easyui-validatebox Wdate" style="width: 370px;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',position:{right:0,top:0}})"/> 按钮(html初始化) <a type="button" href="javascript:;" class="easyui-linkbutton" i
码客说
2019/10/22
2.4K0
(长文预警) 你还在烦工作中碰到的拖拽问题?一个框架jiejue
Sortable —是一个JavaScript库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。支持Meteor,AngularJS,React,Polymer,Vue,Ember,Knockout和任何CSS库,例如Bootstrap
公众号---人生代码
2020/08/04
7.3K0
(长文预警) 你还在烦工作中碰到的拖拽问题?一个框架jiejue
vue使用 Object.assign()巧妙重置data数据
Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。 Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
程序媛夏天
2024/01/18
1.3K0
vue使用 Object.assign()巧妙重置data数据
easyui的jsp添加,修改,查询页面分开写
easyui的jsp添加,修改,查询页面分开写
Java架构师必看
2021/05/14
2.6K0
easyui的jsp添加,修改,查询页面分开写
salesforce 零基础学习(二十三)数据记录导出至excel(自定义报表导出)
该文介绍了在技术社区中,如何利用Apex实现导出Excel功能。首先,定义了一个数据模型用于存储表单提交的数据,然后通过在Controller中定义逻辑,实现导出Excel的功能。同时,对于数据量较大的情况,通过分页导出,并设定字段索引,从而实现了长列表的导出功能。同时,对于字段过多或者某些字段无法导出的问题,通过定制化的字段映射解决了该问题。最后,通过在页面显示导出按钮,实现了导出按钮的显示和点击功能。
Zero-Zhang
2018/01/05
1.7K0
salesforce 零基础学习(二十三)数据记录导出至excel(自定义报表导出)
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(24)-权限管理系统-将权限授权给角色
过了个年回来,回顾一下,我们上次讲了角色管理,我们这一次来讲将权限授权给角色,这一节也是大家比较关心的。因为我们已经跑通了整个系统,知道权限的流转,我们先来看一张图 这张图主要分要3块,角色组----
用户1149182
2018/01/16
1.3K0
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(24)-权限管理系统-将权限授权给角色
自定义JSP[if,foreach,数据,select]标签
第四步:使用自定义jsp标签(在同一个页面,放在文章的最后,名字叫index.jsp)
天蝎座的程序媛
2022/11/18
3.2K0
自定义JSP[if,foreach,数据,select]标签
Salesforce Apex 自定义排序类(一)
使用【lightning-datatable】表示ListView数据时,当表示Opportunity表中Amount项目,需要排序功能时,可以直接在SOQL中使用ORDER BY进行排序,也可以在自定义Apex中实现。
repick
2022/05/25
7590
Salesforce Apex 自定义排序类(一)
JQuery-命令速查-CheatSheet
http://stackoverflow.com/questions/31379409/form-submission-causing-maximum-call-stack-size-exceeded
szhshp
2022/09/21
9.9K0
tampermonkey,采用js解析自定义脚本,实现网页列表数据采集分析
最近一直在做数据采集的事情,目的是使用java开发一套分析指定采集规则,模拟用户动作做数据提取。 因此定义了一套动作脚本,open,click,get,list,opentab,closetab。。。 java解析脚本,调用phantomjs做数据提取,生成数据json文件,对外提供数据接口。 采集引擎终于写的差不多了,虽然还有很多问题需要修改,但是终于不用加班了,嘿嘿嘿。-------jstarseven
大道七哥
2019/09/10
3.9K0
tampermonkey,采用js解析自定义脚本,实现网页列表数据采集分析
推荐阅读
相关推荐
ajaxFileUpload+ThinkPHP+jqGrid 图片上传与显示
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验