[英]How to place select element and toggle button to free jqgrid toolbar
I'm looking for a way to place select element and toggle button to free jqgrid top toolbar if font awesome icon set is used. 我正在寻找一种方法,如果使用了字体真棒图标集,则可以放置选择元素和切换按钮以释放jqgrid顶部工具栏。 I tried code which worked in 4.6: 我尝试了在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>'
);
but select element does not appear. 但没有出现选择元素。
For toggle button I tried 对于切换按钮,我尝试了
$("#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;
}
});
but toggle button also does not appear in toolbar. 但切换按钮也不会出现在工具栏中。 How to force those elements to appear ? 如何迫使这些元素出现?
You should change because .navtable
is now not table . 您应该更改,因为.navtable
现在不是table 。 See the wiki article for more details. 有关更多详细信息,请参见Wiki文章 。 So the code should be something like the following: 因此,代码应类似于以下内容:
$("#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();
Additionally I added small CSS fixes 此外,我添加了一些小的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 shows the results: 该演示显示了结果:
UPDATED: I though more about your question and I can suggest better solution of the same problem. 更新:尽管我对您的问题有更多了解,但我可以建议更好地解决同一问题。 I think that it would be easier don't use jQuery UI Button at all. 我认为根本不使用jQuery UI Button会更容易。 instead of that one can mark the button as "checked" just by toggling ui-state-active
class. 而不是仅仅通过切换ui-state-active
类就可以将按钮标记为“已选中”。 So I suggest to add the CSS rule 所以我建议添加CSS规则
.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { margin: 1px; }
first of all. 首先。 The implementation of the checked button one can make by using navButtonAdd
method: 可以使用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 seems to work without any side effects and be very simple. 相应的演示似乎没有任何副作用,并且非常简单。 The displayed results of "checked" button look like on the picture below: “选中”按钮的显示结果如下图所示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.