如何放置 select 元素和切换按钮以释放 jqgrid 工具栏
How to place select element and toggle button to free jqgrid toolbar
我正在寻找一种方法来放置 select 元素和切换按钮以释放 jqgrid 顶部工具栏(如果使用超赞字体图标集)。
我尝试了在 4.6 中工作的代码:
var i,
selectElem= '<select tabindex="-1" id="_layout">';
for (i=0; i<10; i++) {
selectElem += '<option value="'+i+'" ';
if (i==layout)
selectElem += ' selected';
selectElem += '>Form ' + i + '</option>'
}
$("#grid_toppager_left table.navtable tbody tr").append(
'<td class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div my-nav-checkbox">' +
selectElem +
'</select>' +
'</div></td>'
);
但是 select 元素没有出现。
我试过切换按钮
$("#grid_toppager_left table.navtable tbody tr").append(
'<td class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div my-nav-checkbox">' +
'<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
'<label ' +' for="AutoEdit">Toggle</label></div></td>'
);
$("#AutoEdit").button({
text: false,
icons: {primary: "fa-star"}
}).click(function () {
autoedit = !autoedit;
}
});
但是切换按钮也没有出现在工具栏中。
如何强制显示这些元素?
您应该更改,因为 .navtable
现在是 而不是 table。有关详细信息,请参阅 the wiki article。所以代码应该像下面这样:
$("#grid_toppager_left .navtable").append(
'<div class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div my-nav-checkbox">' +
'<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
'<label ' +' for="AutoEdit">Toggle</label></div></div>'
);
$("#AutoEdit").button({
text: false,
icons: {primary: "fa fa-lg fa-fw fa-star"}
}).click(function () {
autoedit = !autoedit;
}
);
var $label = $("#AutoEdit").next("label");
$label.children(".ui-button-icon-primary").removeClass("ui-icon");
$label.find(".ui-button-text").hide();
此外,我还添加了小 CSS 修复程序
.my-nav-checkbox > .ui-button-icon-only { margin-top: 5px; }
.my-nav-checkbox > .ui-button-icon-only > .ui-button-icon-primary.fa { margin-left: 6px; }
.my-nav-checkbox:hover { margin: 1px; }
The demo 显示结果:
更新: 我虽然对你的问题有更多了解,但我可以建议更好的解决同一问题的方法。我认为完全不使用 jQuery UI 按钮会更容易。而不是那个可以通过切换 ui-state-active
class 将按钮标记为 "checked"。所以我建议添加 CSS 规则
.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { margin: 1px; }
首先。可以使用navButtonAdd
方法实现选中按钮:
var autoedit = false;
$grid.jqGrid("navButtonAdd", "#grid_toppager", {
buttonicon: "fa-star",
caption: "",
id: "AutoEdit",
title: "Toggle autoedit",
onClickButton: function (options, e) {
autoedit = !autoedit;
//$("#"+options.id)[autoedit ? "addClass" : "removeClass"]("ui-state-active");
$(e.currentTarget)[autoedit ? "addClass" : "removeClass"]("ui-state-active");
}
});
The corresponding demo 似乎没有任何副作用,而且非常简单。 "checked"按钮显示结果如下图:
我正在寻找一种方法来放置 select 元素和切换按钮以释放 jqgrid 顶部工具栏(如果使用超赞字体图标集)。 我尝试了在 4.6 中工作的代码:
var i,
selectElem= '<select tabindex="-1" id="_layout">';
for (i=0; i<10; i++) {
selectElem += '<option value="'+i+'" ';
if (i==layout)
selectElem += ' selected';
selectElem += '>Form ' + i + '</option>'
}
$("#grid_toppager_left table.navtable tbody tr").append(
'<td class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div my-nav-checkbox">' +
selectElem +
'</select>' +
'</div></td>'
);
但是 select 元素没有出现。
我试过切换按钮
$("#grid_toppager_left table.navtable tbody tr").append(
'<td class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div my-nav-checkbox">' +
'<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
'<label ' +' for="AutoEdit">Toggle</label></div></td>'
);
$("#AutoEdit").button({
text: false,
icons: {primary: "fa-star"}
}).click(function () {
autoedit = !autoedit;
}
});
但是切换按钮也没有出现在工具栏中。 如何强制显示这些元素?
您应该更改,因为 .navtable
现在是 而不是 table。有关详细信息,请参阅 the wiki article。所以代码应该像下面这样:
$("#grid_toppager_left .navtable").append(
'<div class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div my-nav-checkbox">' +
'<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
'<label ' +' for="AutoEdit">Toggle</label></div></div>'
);
$("#AutoEdit").button({
text: false,
icons: {primary: "fa fa-lg fa-fw fa-star"}
}).click(function () {
autoedit = !autoedit;
}
);
var $label = $("#AutoEdit").next("label");
$label.children(".ui-button-icon-primary").removeClass("ui-icon");
$label.find(".ui-button-text").hide();
此外,我还添加了小 CSS 修复程序
.my-nav-checkbox > .ui-button-icon-only { margin-top: 5px; }
.my-nav-checkbox > .ui-button-icon-only > .ui-button-icon-primary.fa { margin-left: 6px; }
.my-nav-checkbox:hover { margin: 1px; }
The demo 显示结果:
更新: 我虽然对你的问题有更多了解,但我可以建议更好的解决同一问题的方法。我认为完全不使用 jQuery UI 按钮会更容易。而不是那个可以通过切换 ui-state-active
class 将按钮标记为 "checked"。所以我建议添加 CSS 规则
.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { margin: 1px; }
首先。可以使用navButtonAdd
方法实现选中按钮:
var autoedit = false;
$grid.jqGrid("navButtonAdd", "#grid_toppager", {
buttonicon: "fa-star",
caption: "",
id: "AutoEdit",
title: "Toggle autoedit",
onClickButton: function (options, e) {
autoedit = !autoedit;
//$("#"+options.id)[autoedit ? "addClass" : "removeClass"]("ui-state-active");
$(e.currentTarget)[autoedit ? "addClass" : "removeClass"]("ui-state-active");
}
});
The corresponding demo 似乎没有任何副作用,而且非常简单。 "checked"按钮显示结果如下图: