【发布时间】：2019-06-18 13:17:00
【问题描述】：
我正在尝试创建一个基于 Web 的应用程序，用户可以在其中编辑一些显示在网格中的信息。我遵循了 Tom Dykstra 的关于使用 EF6 的 MVC 的优秀教程。它显示了多行数据（但不在可编辑的网格中），每一行的末尾都有一个“编辑”按钮，可将用户带到一个单独的页面/表单，该页面/表单具有该行项目的编辑控件。我的客户想要一个网格，因为他们喜欢 Excel。 我选择了 SlickGrid 来添加网格组件，以便可以就地编辑数据。我在 C# 方面还算不错，并且一直相处得很好，但我真的很少有 Javascript 经验。 （我现在正在学习中途课程）。屏幕截图显示了我到目前为止所获得的信息，我显示了一个包含一些数据的网格。但是，标题行不够大，无法包含标题。我怎样才能使这个更大？我找到了一种方法，但它似乎涉及更改 slick-grid .css 中的硬编码默认值（或在我自己的 .css 中覆盖它）。这对我来说似乎是错误的，（特别是如果我以后想要在我的应用程序中使用多个网格）。我宁愿（期望）找到我可以在 .js 中进行的调用来更改网格标题行的高度。有吗？ 谢谢！
【问题讨论】：
-
澄清一下：我可以打开 slick.grid.css 向下滚动到：.slick-header-column.ui-state-default 然后从 16px 调整 height 属性，所以说： height: 30px; 有效，然后我的标题行足够大，可以正确显示“Year”和“Event”字样。但我觉得这是原始 SlickGrid 代码的一部分，我不应该干预它——它本来就是 mliebman 的，我应该像图书馆一样使用它。
-
我可以通过添加我自己的“自定义”来做类似的事情，即添加包含
.slick-header-column { height: 30px !important; }的 myslickgridstyles.css 并从 Index.ccshtml 查看将网格添加到页面的位置：<link href="@Url.Content("~/Content/myslickgridstyles.css")" rel="stylesheet" type="text/css" />我没有编辑任何原始代码，但我仍然觉得这会改变我随后添加到 Web 应用程序任何位置的另一个视图中的任何网格？跨度> -
我想象的是，我可以在我添加的javascript文件中添加一些东西来支持网格MySlickGridTest.js
var grid; var columns = [ { id: "Year", name: "Year", field: "Year", width: 50 }, { id: "Event", name: "Event", field: "Event", width: 200 }, ]; var options = { enableCellNavigation: true, enableColumnReorder: false, }; $(function () { var myData = []; $.getJSON('/Home/Events', function (data) { myData = data; grid = new Slick.Grid("#lifeGrid", myData, columns, options); }); }); -
例如：grid.getHeaderRow().height = 30; 或 grid.getHeaderRow().setHeight(30); 或 grid.setHeaderRowHeight(30); 或类似的东西，可能后面跟着 grid.invalidate();
标签： slickgrid