我添加了一列以在 jqGrid 网格中添加 Bootstrap 拆分按钮下拉列表。这是一个react组件，代码如下:
React 代码:
"use strict";
var EmployeeGrid = React.createClass({
displayName: "EmployeeGrid",
componentDidMount: function componentDidMount() {
this.loadGrid();
},
loadGrid: function loadGrid() {
var $grid = $("#list"),
resizeGrid = function resizeGrid() {
var newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
};
$(window).on("resize", function () {
resizeGrid();
});
var $body = $('body');
$.ajax({
url: 'sample.json',
dataType: 'json',
success: function success(data1) {
var d1 = data1;
console.log('hello');
$("#list").jqGrid({
data: d1,
colNames: ["id", "FirstName", "LastName", "Country", "Status"],
colModel: [{ name: "id", align: "center", hidden: true },
{ name: "FirstName", align: "center", sortable: false, hidden: false },
{ name: "LastName", align: "center", sortable: false, hidden: false },
{ name: "Country", align: "center", sortable: false, hidden: false },
{ name: "Status",
align: "center",
width: 93,
sortable: false,
edittype: 'select',
hidden: false,
editoptions: { value: { '1': 'Hired', '2': 'Extended', '3': 'Terminated',
'4': 'Fired', '5': 'Retired' }, defaultValue: 'Hired' },
formatoptions: { disabled: false },
formatter: function formatter(cellvalue, options, rowObject) {
var str = '<div class="btn-group"> ' + '<button type="button" class="btn btn-sm btn-success" style="min-width: 65px;max-width: 65px">Action</button>' + '<button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown">' + '<span class="caret"></span>' + '<span class="sr-only">Toggle Dropdown</span>' + '</button>' + '<ul class="dropdown-menu" role="menu">' + '<li><a href="#">Hired</a></li>' + '<li><a href="#">Extended</a></li>' + '<li><a href="#">Terminated</a></li>' + '<li><a href="#">Retired</a></li>' + '</ul>' + '</div>';
return str;
} }],
loadComplete: function() {//chaneg the height of each row to 200
var grid = $("#list");
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
grid.jqGrid('setRowData',ids[i], false, { height : 200 });
}
},
cmTemplate: { autoResizable: true },
autoResizing: { compact: true, resetWidthOrg: true },
autowidth: true,
height: 350,
iconSet: "fontAwesome",
guiStyle: "bootstrap",
pager: '#pager',
caption: 'Employees Listing',
pgbuttons: false,
viewrecords: false,
pgtext: "",
pginput: false
});
},
error: function error(x,y,z) {
//alert('DATA CANNOT READ'+ JSON.stringify(x));
console.log(JSON.stringify(x));
}
});
},
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"div",
null,
React.createElement(
"h1",
null,
"Top header"
)
),
React.createElement(
"div",
null,
React.createElement(
"div",
{ className: "container-fluid" },
React.createElement("table", { id: "list" }),
React.createElement("div", { id: "pager" })
)
),
React.createElement(
"div",
null,
React.createElement(
"h1",
null,
"bottom header"
)
)
);
}
});
/////////////////////////////////////////////////////////
// this code will show the seleted text on the button
////////////////////////////////////////////////////////////
$('.btn-success').on('click',function(e){
e.preventDefault();
})
$('.dropdown-menu a').on('click', function(e){
e.preventDefault();
var anchor = $(e.currentTarget);
var href = anchor.attr('href');
var text = anchor.text();
var button = anchor.closest('.btn-group').find('button:first-child');
button.attr('data-url', href);
button.text(text);
button.on('click', gotoUrl);
});
function gotoUrl(e){
e.preventDefault();
}
/////////////////////////////////////////////////////
ReactDOM.render(React.createElement(EmployeeGrid, null), document.getElementById('divOuterContainer'));
HTML:
**
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/free-jqgrid/4.14.0/css/ui.jqgrid.min.css">
<style>
.ui-jqgrid tr.jqgrow > td {
white-space: normal;
}
/****************************************/
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption,
.ui-jqdialog.ui-jqgrid-bootstrap .ui-jqdialog-titlebar {
background-color: #009926;
color: white;
}
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv {
background-color: #009926;
color:#fff;
font-weight: bold;
}
.ui-jqgrid-bootstrap.ui-jqgrid .ui-jqgrid-toppager,
.ui-jqgrid-bootstrap.ui-jqgrid .ui-jqgrid-pager {
background-color: #009926;
color:#fff;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > thead > tr > th.active,
.ui-pg-table .ui-pg-button.active,
.ui-jqgrid-actions .ui-pg-div.active {
background-color: #009926;
}
/*fixes split buttons breaking when page resizes*/
.btn-group {
white-space: nowrap;
font-size: 0;
}
.btn-group-vertical>.btn, .btn-group>.btn {
display:inline-block;
float:none;
}
</style>
</head>
<body>
<div id="divOuterContainer" class="container-fluid"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="EmployeeGrid.js">
</script>
</body>
</html>
**
在上面的代码中，堆栈溢出不允许我添加 facebook 的 React 库。因此，请在测试代码时添加 react 文件，即: react-15.0.0.js 和 react-dom-15.0.0.js
它使用的 JSON 数据
[{"id":1, "FirstName":"John","LastName":"Akram", "Country":"USA", "Status":"Hired"},
{"id":2, "FirstName":"John","LastName":"Akram", "Country":"USA", "Status":"Hired"},
{"id":3, "FirstName":"John","LastName":"Akram", "Country":"USA", "Status":"Hired"}
]
它生成以下网格:
问题#1: 正如您在代码中看到的，我为拆分按钮添加了四个选项
- 已聘用
- 扩展
- 已终止
- 退休
但正如您在图像中看到的，它仅显示三个选项，为什么它隐藏单元格内的最后一个选项“已退休”以及如何解决此问题？
问题#2:
正如您所看到的，用户选择了选项，但所选选项不会显示在按钮上。但我已经为其编写了代码，如果您在网格代码底部看到 react 代码
$('.btn-success').on('click',function(e){
e.preventDefault();
})
$('.dropdown-menu a').on('click', function(e){
e.preventDefault();
var anchor = $(e.currentTarget);
var href = anchor.attr('href');
var text = anchor.text();
var button = anchor.closest('.btn-group').find('button:first-child');
button.attr('data-url', href);
button.text(text);
button.on('click', gotoUrl);
});
function gotoUrl(e){
e.preventDefault();
}
但是为什么它不会将选定的选项文本设置为按钮的文本？我该如何解决这个问题？
最佳答案
这应该可以修复它:
tr.jqgrow:hover {
position:relative;
z-index: 1;
}
如果在 :hover 上正确显示还不够，请考虑在下拉菜单打开时向行添加一个类，并在关闭时将其删除:
$(this).closest('tr.jqgrow').addClass('opened');
...需要进入下拉列表的打开事件。并且需要在下拉关闭事件时删除。当然，将上面的 CSS 调整为 tr.jqgrow.opened {...}
要检查的另一件事是是否有 .dropdown 中的任何一个 parent 有一个overflow:hidden并用 visible 覆盖它.
关于jquery - 为什么拆分按钮下拉菜单将选项隐藏在单元格后面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43763554/