Gridmvc冻结标头jquery [英] Gridmvc freeze header jquery

问题描述

我正在寻找GridMVC标题冻结方面的帮助。



我尝试了3个插件（http://www.jqueryscript.net/table/ JavaScript选项的jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll.html）但无法冻结页面滚动页眉。



http://gridmvc.azurewebsites.net/



最接近我可以得到的是应用JQuery插件我有2个标题:(当我在同一网格上滚动时。



目前代码代码



我的尝试：

I'm looking for some help with GridMVC header freeze.

I have tried a 3 plugins (http://www.jqueryscript.net/table/jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll.html) of JavaScript options but not able to freeze the header on page scroll.

http://gridmvc.azurewebsites.net/

The nearest I could get is on applying JQuery plugin I got 2 headers :( when I scrolled on the same grid.

Code code so far

What I have tried:

<meta http-equiv="X-UA-Compatible" content="IE=11;chrome=1" />
<script src="/Scripts/jquery-3.1.0.min.js"></script>
<link href="/Content/Gridmvc.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.8.3.min.js"></script>
<script src="/Scripts/gridmvc.min.js"></script>
<script src="/Scripts/bootstrap-datepicker.js"></script>
<script src="/Scripts/gridmvc.customwidgets.js" type="text/javascript"> </script>
<script src="/Scripts/jquery.freezeheader.js" type="text/javascript"></script>

<script>
    jQuery(document).ready(function ($) {
        $(".table").freezeHeader({ 'height': '1200px; Width: 1900px' });
    });
</script>

<div id="divVendor" >

    


    <div class="grid-mvc" data-lang="en" data-gridname="VendorGrid" data-selectable="true" data-multiplefilters="true">
        <div class="grid-wrap">
            <table class="table table-striped grid-table" >
                
                <thead>
                        <tr>
<th class="grid-header permHide-mode"><div class="grid-filter" data-filterdata="[]" data-name="RowId" data-type="System.Int32" data-widgetdata="null">
<span class="grid-filter-btn" title="Filter this column"></span></div><div class="grid-header-title">
<a href="?grid-column=RowId&grid-dir=0">RowId</a></div></th><th class="grid-header"> ... Other Columns

                </thead>
                <tbody>
                                <tr class="grid-row " >
<td class="grid-cell permHide-mode" data-name="RowId">219</td>... Other data elements

推荐答案

）{

（。table）。freezeHeader（{'height'：'1200px; Width：1900px'}）;
}）;
< / script>

< div id =divVendor>




< div class =grid-mvcdata-lang =endata-gridname =VendorGriddata-selectable =true data-multiplefilters =true>
< div class =grid-wrap>
< table class =table table-striped grid-table>

< thead>
< tr>
< th class =grid-header permHide-mode>< div class =grid-filterdata-filterdata =[]data-name =RowIddata-type =System .Int32data-widgetdata =null>
< span class =grid-filter-btntitle =过滤此列>< / span>< / div>< div class =grid-header-title>
< a href =？grid-column = RowId& grid-dir = 0> RowId< / a>< / div>< / th>< th class =grid-header > ...其他列

< / thead>
< tbody>
< tr class =grid-row>
< td class =grid-cell permHide-modedata-name =RowId> 219< / td> ...其他数据元素

(".table").freezeHeader({ 'height': '1200px; Width: 1900px' }); }); </script> <div id="divVendor" > <div class="grid-mvc" data-lang="en" data-gridname="VendorGrid" data-selectable="true" data-multiplefilters="true"> <div class="grid-wrap"> <table class="table table-striped grid-table" > <thead> <tr> <th class="grid-header permHide-mode"><div class="grid-filter" data-filterdata="[]" data-name="RowId" data-type="System.Int32" data-widgetdata="null"> <span class="grid-filter-btn" title="Filter this column"></span></div><div class="grid-header-title"> <a href="?grid-column=RowId&grid-dir=0">RowId</a></div></th><th class="grid-header"> ... Other Columns </thead> <tbody> <tr class="grid-row " > <td class="grid-cell permHide-mode" data-name="RowId">219</td>... Other data elements

这篇关于Gridmvc冻结标头jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！