用.net写了一个gridview展示数据,因为要固定表头,找了好多方法,最终采用js实现,方便快捷,但是因为我的数据列很多,有些字段字符很长,这样设置会导致界面很难看,而修改gridview的数据列列宽也会显得很奇怪,会太高了。
怎么设置表头宽度和高度等其他样式,让它匹配下面的数据列呢?
js代码类似这样
<script type="text/javascript">
function s() {
var t = document.getElementById("<%=GridView1.ClientID%>");
var t2 = t.cloneNode(true)
for (i = t2.rows.length - 1; i > 0; i--)
t2.deleteRow(i)
t.deleteRow(0)
a.appendChild(t2)
}
window.onload = s
然后在gridview前加两个div:
解决了,js代码是可行的,但是需要调整表格宽度。一个是ItemStyle-Width,一个是headstyle-width,两者需要一致,且比单元格里的数据要宽,这样就能实现还不错的固定效果了。
您好,
不知道您有没有用过Scroll? 当列宽固定时,如果某些列的内容特别长时,会自动加高列的宽度. 但是有一个解决办法是, 可滚动高度和宽度,从而使得样式稍微好看一点.不知道你现在的输出是什么样子的呢.
我做了一个demo,使用scrollablegirdview 插件:
<script src="Scripts/jquery-3.6.0.min.js"></script>
<script src="Scripts/ScrollableGridPlugin_ASP.NetAJAX_2.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=GridView1.ClientID %>').Scrollable({
ScrollHeight: 300,
IsInUpdatePanel: true
});
});
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns >
<asp:BoundField DataField="Id" HeaderText="Id"/>
<asp:BoundField DataField="time" HeaderText="time"/>
<asp:BoundField DataField="txt1" HeaderText="txt1"/>
<asp:BoundField DataField="txt2" HeaderText="txt2"/>
<asp:BoundField DataField="txt3" HeaderText="txt3"/>
<asp:BoundField DataField="txt4" HeaderText="txt4"/>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
补充:看到layui里面的栅格布局,感觉理论上也是可以的,但试了之后发现不理想,想要的样式没出现,反而把我原来的样式搞乱了,也很难重新用新架构重写。不过利用div的方法写成格栅感觉似乎是可行的,只是我不太会……