- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有 10 列的光滑网格。但我只需要显示 3 列。怎么可能有人帮助我紧急。这里是我的光滑网格,这里是光滑的网格代码。此代码默认显示所有列,但我只想显示 3 列。
CSS
.slick-row.selected .cell-selection {
background-color: transparent; /* show default selected row background */
}
HTML
<div style="position:relative">
<div style="width:600px;">
<div class="grid-header" style="width:100%">
<label>SlickGrid</label>
<span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel"
onclick="toggleFilterRow()"></span>
</div>
<div id="myGrid" style="width:100%;height:500px;"></div>
<div id="pager" style="width:100%;height:20px;"></div>
</div>
<div class="options-panel">
<b>Search:</b>
<hr/>
<div style="padding:6px;">
<label style="width:200px;float:left">Show tasks with % at least: </label>
<div style="padding:2px;">
<div style="width:100px;display:inline-block;" id="pcSlider"></div>
</div>
<br/>
<label style="width:200px;float:left">And title including:</label>
<input type=text id="txtSearch" style="width:100px;">
<br/><br/>
<button id="btnSelectRows">Select first 10 rows</button>
<br/>
<h2>Demonstrates:</h2>
<ul>
<li>a filtered Model (DataView) as a data source instead of a simple array</li>
<li>grid reacting to model events (onRowCountChanged, onRowsChanged)</li>
<li><b>FAST</b> DataView recalculation and <b>real-time</b> grid updating in response to data changes.<br/>The grid holds <b>50'000</b> rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 rows.</li>
<li>adding new rows, bidirectional sorting</li>
<li>column options: cannotTriggerInsert</li>
<li>events: onCellChange, onAddNewRow, onKeyDown, onSelectedRowsChanged, onSort</li>
<li><font color=red>NOTE:</font> all filters are immediately applied to new/edited rows</li>
<li>Handling row selection against model changes.</li>
<li>Paging.</li>
<li>inline filter panel</li>
</ul>
<h2>View Source:</h2>
<ul>
<li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example4-model.html"
target="_sourcewindow"> View the source for this example on
Github</a></li>
</ul>
</div>
</div>
</div>
<div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;">
Show tasks with title including <input type="text" id="txtSearch2"> and % at least
<div style="width:100px;display:inline-block;" id="pcSlider2"></div>
</div>
JavaScript
<script src="slick.grid/lib/firebugx.js"></script>
<script> var dataView; var grid; var data = []; var columns = [
{id: "sel", name: "#", field: "num", behavior: "select", cssClass:
"cell-selection", width: 40, cannotTriggerInsert: true, resizable:
false, selectable: false }, {id: "title", name: "Title", field:
"title", width: 120, minWidth: 120, cssClass: "cell-title", editor:
Slick.Editors.Text, validator: requiredFieldValidator, sortable:
true}, {id: "duration", name: "Duration", field: "duration",
editor: Slick.Editors.Text, sortable: true}, {id: "%",
defaultSortAsc: false, name: "% Complete", field: "percentComplete",
width: 80, resizable: false, formatter:
Slick.Formatters.PercentCompleteBar, editor:
Slick.Editors.PercentComplete, sortable: true}, {id: "start", name:
"Start", field: "start", minWidth: 60, editor: Slick.Editors.Date,
sortable: true}, {id: "finish", name: "Finish", field: "finish",
minWidth: 60, editor: Slick.Editors.Date, sortable: true}, {id:
"effort-driven", name: "Effort Driven", width: 80, minWidth: 20,
maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven",
formatter: Slick.Formatters.Checkmark, editor:
Slick.Editors.Checkbox, cannotTriggerInsert: true, sortable: true} ];
var options = { editable: true, enableAddRow: true,
enableCellNavigation: true, asyncEditorLoading: true,
forceFitColumns: false, topPanelHeight: 25 };
var sortcol = "title"; var sortdir = 1; var percentCompleteThreshold
= 0; var searchString = "";
function requiredFieldValidator(value) { if (value == null || value
== undefined || !value.length) {
return {valid: false, msg: "This is a required field"}; } else {
return {valid: true, msg: null}; } }
function myFilter(item, args) { if (item["percentComplete"] <
args.percentCompleteThreshold) {
return false; }
if (args.searchString != "" &&
item["title"].indexOf(args.searchString) == -1) {
return false; }
return true; }
function percentCompleteSort(a, b) { return a["percentComplete"] -
b["percentComplete"]; }
function comparer(a, b) { var x = a[sortcol], y = b[sortcol];
return (x == y ? 0 : (x > y ? 1 : -1)); }
function toggleFilterRow() {
grid.setTopPanelVisibility(!grid.getOptions().showTopPanel); }
$(".grid-header .ui-icon")
.addClass("ui-state-default ui-corner-all")
.mouseover(function (e) {
$(e.target).addClass("ui-state-hover")
})
.mouseout(function (e) {
$(e.target).removeClass("ui-state-hover")
});
$(function () { // prepare the data for (var i = 0; i < 50000;
i++) {
var d = (data[i] = {});
d["id"] = "id_" + i;
d["num"] = i;
d["title"] = "Task " + i;
d["duration"] = "5 days";
d["percentComplete"] = Math.round(Math.random() * 100);
d["start"] = "01/01/2009";
d["finish"] = "01/05/2009";
d["effortDriven"] = (i % 5 == 0); }
dataView = new Slick.Data.DataView({ inlineFilters: true }); grid
= new Slick.Grid("#myGrid", dataView, columns, options); grid.setSelectionModel(new Slick.RowSelectionModel());
var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid,
options); // columnpicker = new Slick.Controls.ColumnPicker(Columns,
Grid, GridOptions); //grid.setSelectedcolumn([]); // move the
filter panel defined in a hidden div into grid top panel
$("#inlineFilterPanel")
.appendTo(grid.getTopPanel())
.show();
grid.onCellChange.subscribe(function (e, args) {
dataView.updateItem(args.item.id, args.item); });
grid.onAddNewRow.subscribe(function (e, args) {
var item = {"num": data.length, "id": "new_" + (Math.round(Math.random() * 10000)), "title": "New task",
"duration":
"1 day", "percentComplete": 0, "start": "01/01/2009", "finish":
"01/01/2009", "effortDriven": false};
$.extend(item, args.item);
dataView.addItem(item); });
grid.onKeyDown.subscribe(function (e) {
// select all rows on ctrl-a
if (e.which != 65 || !e.ctrlKey) {
return false;
}
var rows = [];
for (var i = 0; i < dataView.getLength(); i++) {
rows.push(i);
}
grid.setSelectedRows(rows);
e.preventDefault(); });
grid.onSort.subscribe(function (e, args) {
sortdir = args.sortAsc ? 1 : -1;
sortcol = args.sortCol.field;
if ($.browser.msie && $.browser.version <= 8) {
// using temporary Object.prototype.toString override
// more limited and does lexicographic sort only by default, but can be much faster
var percentCompleteValueFn = function () {
var val = this["percentComplete"];
if (val < 10) {
return "00" + val;
} else if (val < 100) {
return "0" + val;
} else {
return val;
}
};
// use numeric sort of % and lexicographic for everything else
dataView.fastSort((sortcol == "percentComplete") ? percentCompleteValueFn : sortcol, args.sortAsc);
} else {
// using native sort with comparer
// preferred method but can be very slow in IE with huge datasets
dataView.sort(comparer, args.sortAsc);
} });
// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render(); });
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render(); });
dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1;
var enableAddRow = isLastPage || pagingInfo.pageSize == 0;
var options = grid.getOptions();
if (options.enableAddRow != enableAddRow) {
grid.setOptions({enableAddRow: enableAddRow});
} });
var h_runfilters = null;
// wire up the slider to apply the filter to the model
$("#pcSlider,#pcSlider2").slider({
"range": "min",
"slide": function (event, ui) {
Slick.GlobalEditorLock.cancelCurrentEdit();
if (percentCompleteThreshold != ui.value) {
window.clearTimeout(h_runfilters);
h_runfilters = window.setTimeout(updateFilter, 10);
percentCompleteThreshold = ui.value;
}
} });
// wire up the search textbox to apply the filter to the model
$("#txtSearch,#txtSearch2").keyup(function (e) {
Slick.GlobalEditorLock.cancelCurrentEdit();
// clear on Esc
if (e.which == 27) {
this.value = "";
}
searchString = this.value;
updateFilter(); });
function updateFilter() {
dataView.setFilterArgs({
percentCompleteThreshold: percentCompleteThreshold,
searchString: searchString
});
dataView.refresh(); }
$("#btnSelectRows").click(function () {
if (!Slick.GlobalEditorLock.commitCurrentEdit()) {
return;
}
var rows = [];
for (var i = 0; i < 10 && i < dataView.getLength(); i++) {
rows.push(i);
}
grid.setSelectedRows(rows); });
// initialize the model after all the events have been hooked up
dataView.beginUpdate(); dataView.setItems(data);
dataView.setFilterArgs({
percentCompleteThreshold: percentCompleteThreshold,
searchString: searchString }); dataView.setFilter(myFilter); dataView.endUpdate();
// if you don't want the items that are not visible (due to being
filtered out // or being on a different page) to stay selected,
pass 'false' to the second arg dataView.syncGridSelection(grid,
true);
$("#gridContainer").resizable(); }) </script>
最佳答案
我认为最简单的方法是仅将您希望对“列”变量可见的 3 列添加。
如果您想稍后显示更多列,您可以动态添加更多列(有关如何执行此操作的信息,请参阅此 stackoverflow 问题:Can I add a column to slickgrid on on the fly?)
更新:仅显示前 3 列的示例
插入这一行:
columns = columns.slice(0, 3);
在以下行之前:
grid = new Slick.Grid("#myGrid", dataView, columns, options);
关于javascript - 我怎样才能在我的 13 列光滑网格中只显示 3 列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26271210/
光滑,如何将查询映射到继承表模型? IE, 我有表A,B,C A是“父”表,B&C是“子”表 我想知道的是我该如何使用平滑模型,以便A将成为抽象的B&C具体类型,而查询A中的一行将导致B或C对象 类似
如果数据库尚不存在,有没有办法轻松创建数据库? Database.forURL("jdbc:mysql://127.0.0.1/database", driver = "com.mysql.jdbc.
我是 Java slick 的新手,我对“相机”的翻译有一个小问题。我有这个代码: package chapterOne; import org.newdawn.slick.Animation; im
我正在尝试使用 Slick 渲染健康栏。我想要一个红色矩形,前面有一个绿色矩形来显示剩余的生命值。这是我到目前为止所拥有的: Rectangle healthBG = new Rect
有一个225px的方 block 。在里面插入一张大尺寸的图片(850 像素)。她走到外面。 看起来像这样: .content {display: inline-block;} .column {fl
我正在用 Java slick 编写游戏,我想添加消息管理。应该有一个 ArrayList,其中包含所有尚未发送的消息。每 2 秒应显示列表中的下一项。 我的逻辑: 在更新方法中,应显示第一条消息。
case class Account(var email:String, var pass:String, var familyId: Int, var accessId: Int, id: Opti
Content should wrap Content should wrap Content should wrap C
我正在使用 JQuery Slick Slider http://kenwheeler.github.io/slick/效果非常好。 我还运行了一个单独的脚本,用于检查页面 url,如果光滑 slid
我知道如何使用 click, scroll 的事件处理函数和其他默认事件。 目前我正在使用一个名为 slick slider 的 slider 插件。并且它工作正常,我想用定义的函数而不是匿名函数替换
我有 slider ,每个 slider 都包含视频作为背景和播放/暂停按钮。尝试通过单击正确的按钮来播放视频,但出现以下行为:我单击第二张幻灯片中的播放按钮,视频从第一张幻灯片中播放。暂停按钮也是如
我正在尝试在我的页面上实现一个光滑的 slider 。在浏览精美的文档时,他们提到要以响应方式使用 slider ,请遵循代码(我在下面发布)。我无法理解断点的用途。谁能给我解释一下代码。我尝试谷歌搜
我遇到了光滑 slider 的问题,我想创建一个应该在光滑 slider 上打开的灯箱,我想在灯箱中添加一些内容,主要问题是我不知道如何我可以将内容添加到灯箱部分吗? $('.works-slides
我正在尝试使用一个 slider ,它附带一个搜索框。此搜索框搜索 slider 中的用户名称。 目前,当用户开始在输入框中键入内容时,搜索框会自动完成全名。 例如,他们输入“Joh”,建议输入“Jo
我一直在尝试创建类似 this 的东西使用 slick.js,我真的无法理解它。 我已经准备好了当前的代码。如何使中心幻灯片图像的宽度和高度为 100% 并为幻灯片添加填充?好像不行。 我真的很感激任
我使用光滑 slider 创建了 slider 。我遇到的问题是在线断点工作正常的宽度。 但是,当我以正常方式写入 html file 时,相同的代码不起作用。谁能帮我这个。从检查中检查并查看正常代码
我正在尝试在输入字段中删除可拖动选项(以便我可以选择文本并使用箭头在字段内导航)。 var slider = $('.slider').slick({ infinite: false,
当它到达 breakpoint 时,如 990px,我在 slick slider 中遇到了问题。它删除了背景并且没有显示任何类型的错误。 iconic 我正在使用这个 javascript 来提
我想将光滑 slider 的点定位在上一个和下一个按钮之间。Slick 提供设置让您定位点/按钮。但它们会互相显示。 这是我的代码: $('.slider').slick({ arrows:
我在网站上创建了一个光滑的 slider 。我可以看到它进入“光滑模式”,但也没有显示我告诉它的幻灯片数量。它们都在那里,我可以通过更改它们的“左”和“不透明度”CSS 值来显示它们。 我将无法复制这
我是一名优秀的程序员,十分优秀!