在Grid中增加下拉框

原创 2018年04月17日 09:47:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../../lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
        <script src="../../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
    
    
    <script type="text/javascript">
        //可以编辑的列
            var roleStr = "PMA";
            //下拉框选项
            var comboList = ["未处理", "处理中", "已处理", "其他"];               
            
        $(function ()
        {
            var jsonObj = {};
            jsonObj.Rows = [
                { id: 3, name: "林三", sex: "男", birthday: "1989/01/12", PMA:"未处理", PMB: "未处理", PMC: "未处理" },
                { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12", PMA:"未处理", PMB: "未处理", PMC: "未处理" },
                { id: 33, name: "啊三", sex: "男", birthday: "1981/12/12", PMA:"处理中", PMB: "未处理", PMC: "未处理" },
                { id: 34, name: "表三", sex: "男", birthday: "1983/01/12", PMA:"未处理", PMB: "已处理", PMC: "未处理" },
                { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12", PMA:"未处理", PMB: "未处理", PMC: "未处理" },
                { id: 33, name: "成三", sex: "男", birthday: "1989/11/23", PMA:"未处理", PMB: "未处理", PMC: "未处理" },
                { id: 34, name: "都三", sex: "女", birthday: "1989/04/12", PMA:"未处理", PMB: "未处理", PMC: "未处理" },
                { id: 324, name: "鄂三", sex: "男", birthday: "1999/05/15", PMA:"未处理", PMB: "未处理", PMC: "不需要" },
                { id: 344, name: "林三", sex: "男", birthday: "1969/02/21", PMA:"未处理", PMB: "未处理", PMC: "未处理" },
                { id: 1, name: "王开", sex: "男", birthday: "1989/01/12", PMA:"未处理", PMB: "不知道", PMC: "未处理" }
            ];
            
        
                        
            $("#maingrid").ligerGrid({
                columns: [                
                { display: '主键', name: 'id', width: 50, type: 'int' },
                { display: '名字', name: 'name', width: 50 },
                { display: '性别', name: 'sex', width: 50, isSort: false
               },  
               {
                    display: 'PMA', isAllowHide: false,
                    render: function (row)
                    {    
                        return createSelect('PMA', row.id, row.PMA);
                    }
               },
               {
                    display: 'PMB', isAllowHide: false,
                    render: function (row)
                    {    
                        return createSelect('PMB', row.id, row.PMB);
                    }
               },
                {
                    display: 'PMC', isAllowHide: false,
                    render: function (row)
                    {    
                        return createSelect('PMC', row.id, row.PMC);
                    }
                }
                
                ],width:'100%',
                data: jsonObj, 
                pageSizeOptions: [5, 10, 15, 20] 
            });
        });
        
        //绑定下拉框
        function createSelect(stype, id, val){
       
        //可以操作
        if(stype == roleStr){
        var html = '<select id="pid_' + id + '" onchange="gradeChange(' + id + ')">';
       
        $.each(comboList,function(index,value){
if(val == value || ($.inArray(val, comboList)== -1 && value == "其他" ))
html += '<option value="'+ value +'" selected="selected">'+ value + '</a>';
else
html += '<option value="'+ value +'">'+ value + '</a>';
});
                        
        html += "</select>";
        }
        else{
        html = val;
        }
        return html;
        }
        
// 选中后的事件
        function gradeChange(id){   
        var opt=$("#pid_" + id).val();
        var options=$("#pid_" + id + " option:selected");
       
        alert("您选中SELECT的ID是" + id + "  值:" + options.val());
        }


    </script>
</head>
<body>
    <div id="maingrid"></div>   
</div>
</body>

</html>


如果有不清楚可以联系作者:bertchen   微信号:bertchen1206

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bestsnow/article/details/79970244

Ext.grid.EditorGridPanel 单元格套用下拉列表ComboBox

function MentalWithMod(id){ var mentalResultGridStore = new Ext.data.JsonStore({ proxy : new Ext.dat...
  • ylwyoyo
  • ylwyoyo
  • 2013年10月19日 16:05
  • 3299

jqGrid增删改查显示——联动下拉框+nodejs后台

本篇文章只介绍jqGrid的联动操作 相关博文: ①jqGrid增删改查显示——显示+nodejs后台:http://blog.csdn.net/tangjiarao/article/detail...
  • tangjiarao
  • tangjiarao
  • 2016年01月04日 15:13
  • 4526

WPF:下拉列表的简单实现

最近在一个WPF项目中用到一个下拉列表,随着用户输入字符而进行显示,使用了绑定等知识,虽然实现比较简单,可是在性能上也是想了很多办法终于才勉强可以用,与大家分享下。 用于页面绑定的模型类: ...
  • zhangaihongde
  • zhangaihongde
  • 2012年11月28日 14:59
  • 713

ExtJS下拉grid

这列:http://www.boarsoft.com/javascript/gridCombo/
  • zhang_Red
  • zhang_Red
  • 2014年07月08日 19:25
  • 2332

kendo UI gridview绑定下拉框示例

AutoEventWireup="true" CodeBehind="UKeyApplyHasReview.aspx.cs" Inherits="UserRegister.SysManage.UKey...
  • lxl743p
  • lxl743p
  • 2014年09月03日 14:38
  • 6498

Kendo UI:Grid中单元格为下拉框/时间控件等

问题 Grid中如何自定义单元格input框的类型,如下拉框,时间控件等? 解决方案 通过editor选项设置,如下拉框类型(以ComboBox为例) { ...
  • sun_jy2011
  • sun_jy2011
  • 2014年11月27日 17:18
  • 3043

LigerUi中GRID嵌入下拉框(select)示例!

var csj_data;       $.ajax        ({            cache: false,            async: false,     ...
  • dxnn520
  • dxnn520
  • 2012年12月17日 18:20
  • 5113

dhtmlx中增加一列(将类似按钮、下拉列表、输入框显示在一行上)

{ type: "label", list: [ { { type: "label", labelWidth: 55 }, { type: "newcolu...
  • my_Wade
  • my_Wade
  • 2015年08月18日 22:16
  • 1160

jqGrid之自定义下拉框

目的:用户表中的负责人,做成下拉框模式,下拉框的选项为负责人中的数据。 1.首先js获取负责人数据(数组格式) var g_ary=[]; var g_fpid=n...
  • qq_27194467
  • qq_27194467
  • 2016年11月21日 11:32
  • 4934

【code】flex给组件添加滚动条

最近打算吧硬盘中的资料记录在博客中, 在flex前台,有时会出现页面撑出付组件,而不出现滚动条的情况。(时间过去很久了,具体的场景记不起来了。) 可以再外面加一层Scroller 解决。 ...
  • nicky9470
  • nicky9470
  • 2015年06月08日 00:54
  • 496
收藏助手
不良信息举报
您举报文章:在Grid中增加下拉框
举报原因:
原因补充:

(最多只允许输入30个字)