在Grid中增加下拉框

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bestsnow/article/details/79970244
<!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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页