在Grid中增加下拉框

最新推荐文章于 2023-04-15 10:30:46 发布

bertchen

最新推荐文章于 2023-04-15 10:30:46 发布

阅读量2.6k

点赞数 1

分类专栏： LigerUI LigerGrid ASP.NET Grid C# 文章标签： LigerGrid combox Grid 中 Combox

本文链接：https://blog.csdn.net/bestsnow/article/details/79970244

版权

LigerUI 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

LigerGrid

2 篇文章 0 订阅

订阅专栏

ASP.NET

2 篇文章 0 订阅

订阅专栏

<!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 + '" οnchange="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