asp.netグリッドビュー列をフリーズします
Asp.netグリッドビューの最初の2〜3の左端の列をフリーズするにはどうすればよいですか？水平スクロール中に、フリーズした最初の2〜3列が常に表示されるようにします。
何か答えはありますか？
はい、いくつかのcssマジックを使用すると、さまざまなz-indexに固定されたスクロール可能な列を使用して、固定された状態を上に保つことができるようです。これには、overflow:scrollが100％移植可能ではない可能性があるという警告があります（私はIE 8/9およびChrome FWIW）でテストしました）。
これを見てください jsFiddle here
GridViewを生成するために使用したASPXは以下のとおりです。
固定列とスクロール列のそれぞれのcssクラスpinnedとscrollableに注意してください（ヘッダーとアイテムに適用されます）
しかし、実際の作業はcssで行われます。特に、列の幅を正しくして、固定されたtd/thを左側に揃える必要があることに注意してください。
aspx
<div id="scrolledGridView">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="ID" HeaderText="Col 1">
<HeaderStyle CssClass="pinned col1"></HeaderStyle>
<ItemStyle CssClass="pinned col1"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Column 2">
<HeaderStyle CssClass="pinned col2"></HeaderStyle>
<ItemStyle CssClass="pinned col2"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Description" HeaderText="Column 3">
<HeaderStyle CssClass="scrolled"></HeaderStyle>
<ItemStyle CssClass="scrolled"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Cost" HeaderText="Column 4">
<HeaderStyle CssClass="scrolled"></HeaderStyle>
<ItemStyle CssClass="scrolled"></ItemStyle>
</asp:BoundField>
</Columns>
</asp:GridView>
css
#scrolledGridView
{
overflow-x: scroll;
text-align: left;
width: 400px; /* i.e. too small for all the columns */
}
.pinned
{
position: fixed; /* i.e. not scrolled */
background-color: White; /* prevent the scrolled columns showing through */
z-index: 100; /* keep the pinned on top of the scrollables */
}
.scrolled
{
position: relative;
left: 150px; /* i.e. col1 Width + col2 width */
overflow: hidden;
white-space: nowrap;
min-width: 500px; /* set your real column widths here */
}
.col1
{
left: 0px;
width: 50px;
}
.col2
{
left: 50px; /* i.e. col1 Width */
width: 100px;
}
jQueryプラグインでヘッダーを修正して列をフリーズできるように作成しました。GridViewに適用できます。画像を参照してください：
ウェブサイトを見てください： http://gridviewscroll.aspcity.idv.tw/
サポートされているブラウザ
- Internet Explorer 7、8（IE 9互換性）
- Internet Explorer 9（9.0.8112）
- Windows7プレビュー上のInternetExplorer 10
- グーグルクローム（23.0.1271.64 m）
- Mozilla Firefox（16.0.2）
- Apple Safari（5.1.7）
ここでデモを利用できます
http://gridviewscroll.aspcity.idv.tw/Demo.aspx
スクリプトを見逃してもいいですか
<script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script>
そのスクリプトはここに続きました。
画面サイズuの幅は変更可能（44）
スクリプトを置くのを忘れないでください
<script type="text/javascript">
(function (n) { jQuery.fn.extend({ gridviewScroll: function (t) { function yt(n, t) { pi(n, t), wi(n, t) } function pi(t, i) { t.find("input").each(function () { var t = n(this)[0].type, f, e; if (t == "checkbox" || t == "radio" || t == "text") { var r = n(this)[0].id, u = n(this)[0].name, r = r.replace("_Copy", ""), u = u.replace("_Copy", ""); n(this)[0].name = u + "_" + i, n(this)[0].id = r + "_" + i, f = n("#" + r), e = n(this); switch (t) { case "checkbox": case "radio": e.change(function () { var t = n(this).is(":checked"); f.attr("checked", t) }); break; case "text": e.change(function () { var t = n(this).val(); f.val(t) }) } } }) } function wi(t, i) { t.find("select").each(function () { var t = n(this)[0].id, r = n(this)[0].name, t = t.replace("_Copy", ""), r = r.replace("_Copy", ""), u, f; n(this)[0].name = r + "_" + i, n(this)[0].id = t + "_" + i, u = n("#" + t), f = n(this), f.change(function () { var n = this.selectedIndex; u.prop("selectedIndex", n) }) }) } function bi() { var a = l.attr("id") + "Freeze", o, y, v, h, b, c, k, e, s, d, f, t, g; for (document.getElementById(a) ? it = n("#" + a) : (it = l.clone(), it.attr("id", a), it.css({ position: "absolute", width: "", height: "100%", top: 0, left: 0, zIndex: li }), yt(it, "freezeheader"), it.appendTo(tt)), it.show(), o = it.children().eq(0), o.css({ width: "", height: "100%" }), o.find("td").each(function () { n(this)[0].style.display = "" }), y = o.children().eq(0), ki(), v = w[0].length, f = 0; f < i.headerrowcount; f++) for (t = 0; t < v; t++) (h = w[f][t], h != "RS" && h != "CS") && (b = parseInt(h.split(":")[1]), y.children().eq(f).children().eq(b)[0].style.display = t < ct ? "" : "none"); for (c = r.attr("id") + "Freeze", document.getElementById(c) ? p = n("#" + c) : (p = r.clone(), p.attr("id", c), p.css({ position: "absolute", width: "", top: 0, left: 0, zIndex: li }), yt(p, "freezeitem"), e = p.children().eq(0).children().eq(0), k = e.attr("id") + "Freeze", e.attr("id", k), p.appendTo(u)), e = p.children().eq(0).children().eq(0), e.css({ width: "" }), s = e.children().eq(0), s.find("td").each(function () { n(this)[0].style.display = "" }), d = s.children().length, f = i.headerrowcount; f < d; f++) for (t = 0; t < v; t++) t < ct ? s[0].rows[f].cells[t].style.display = "" : (g = s[0].rows[f].cells[t], g.style.display = "none"); o.width() < i.width - i.railsize ? (it.show(), p.show(), p.height(r.height())) : (it.hide(), p.hide()) } function ki() { var r = 0, n, t; for (ct = 0, n = 0; n < w[0].length; n++) { if (t = w[0][n], t == "RS" || t == "CS") { ct++; continue } if (i.freezesize == r) return ct; r++, ct++ } } function di() { for (var r = a.children().length, u = gi() + 1, t, n = i.headerrowcount; n < r; n++) t = a[0].rows[n].cells[0].children[0], t.style.height = u + "px" } function gi() { for (var e = a.children().eq(i.headerrowcount).children().length, t = 0, f, r, u, n = 0; n < e; n++) f = a.children().eq(i.headerrowcount).children().eq(n), r = f.children().eq(0), r[0].style.height = "auto", u = r[0].offsetHeight, u > t && (t = u); return t } function nr() { var it = f.attr("id") + "VerticalRail", r, ut, l, a, t, p, w, d, tt; document.getElementById(it) ? o = n("#" + it) : (o = n(nt).css({ background: i.railcolor, width: i.railsize + "px", position: "absolute", zIndex: ft }), o.attr("id", it), u.append(o), t = { right: 0 }, o.css(t), o.mousedown(function (t) { clearInterval(e); var i = n(this).offset(), r = t.clientY - i.top + n(document).scrollTop(), u = c.offset().top - i.top, f = c.height() + u; r < u && g(-1, !1, !0), r > f && g(1, !1, !0), e = window.setInterval(function () { var r = t.clientY - i.top + n(document).scrollTop(), u = c.offset().top - i.top, f = c.height() + u; r < u && g(-1, !1, !0), r > f && g(1, !1, !0) }, 200) }), o.mouseup(function () { clearInterval(e) }), o.mouseout(function () { clearInterval(e) })), r = f.attr("id") + "VerticalBar", document.getElementById(r) ? c = n("#" + r) : (c = n(nt).css({ background: i.barcolor, width: i.barsize + "px", position: "absolute", zIndex: ft }), c.attr("id", r), ut = { right: (i.railsize - i.barsize) / 2 }, c.css(ut), u.append(c), c.draggable({ axis: "y", containment: o, start: function () { n(this).css({ backgroundColor: i.barhovercolor }) }, stop: function () { n(this).css({ backgroundColor: i.barcolor }) }, drag: function () { g(0, !1) } })), l = f.attr("id") + "Vertical_TIMG", document.getElementById(l) ? v = n("#" + l) : (v = n(pt).css({ height: i.arrowsize, position: "absolute", zIndex: ft, top: 0 }), v.attr("id", l), v.attr("src", i.varrowtopimg), u.append(v), t = { right: 0 }, v.css(t), v.mousedown(function () { clearInterval(e), g(-1, !1, !0), e = window.setInterval(function () { g(-1, !1, !0) }, 200) }), v.mouseup(function () { clearInterval(e) }), v.mouseout(function () { clearInterval(e) })), a = f.attr("id") + "Vertical_BIMG", document.getElementById(a) ? y = n("#" + a) : (y = n(pt).css({ height: i.arrowsize, position: "absolute", zIndex: ft }), y.attr("id", a), y.attr("src", i.varrowbottomimg), u.append(y), t = { right: 0 }, y.css(t), y.mousedown(function () { clearInterval(e), g(1, !1, !0), e = window.setInterval(function () { g(1, !1, !0) }, 200) }), y.mouseup(function () { clearInterval(e) }), y.mouseout(function () { clearInterval(e) })), p = f.attr("id") + "HorizontalRail", document.getElementById(p) ? s = n("#" + p) : (s = n(nt).css({ background: i.railcolor, height: i.railsize + "px", position: "absolute", zIndex: ft }), s.attr("id", p), u.append(s), s.mousedown(function (t) { clearInterval(e); var i = n(this).offset(), r = t.clientX - i.left + n(document).scrollLeft(), u = h.offset().left - i.left, f = h.width() + u; r < u && rt(-1, !0), r > f && rt(1, !0), e = window.setInterval(function () { var r = t.clientX - i.left + n(document).scrollLeft(), u = h.offset().left - i.left, f = h.width() + u; r < u && rt(-1, !0), r > f && rt(1, !0) }, 200) }), s.mouseup(function () { clearInterval(e) }), s.mouseout(function () { clearInterval(e) })), w = f.attr("id") + "HorizontalBar", document.getElementById(w) ? h = n("#" + w) : (h = n(nt).css({ background: i.barcolor, height: i.barsize + "px", position: "absolute", zIndex: ft }), h.attr("id", w), u.append(h), h.draggable({ axis: "x", containment: s, start: function () { n(this).css({ backgroundColor: i.barhovercolor }) }, stop: function () { n(this).css({ backgroundColor: i.barcolor }) }, drag: function () { rt() } })), d = f.attr("id") + "Horizontal_LIMG", document.getElementById(d) ? b = n("#" + d) : (b = n(pt).css({ width: i.arrowsize, position: "absolute", zIndex: ft, top: 0 }), b.attr("id", d), b.attr("src", i.harrowleftimg), u.append(b), b.mousedown(function () { clearInterval(e), rt(-1, !0), e = window.setInterval(function () { rt(-1, !0) }, 200) }), b.mouseup(function () { clearInterval(e) }), b.mouseout(function () { clearInterval(e) })), tt = f.attr("id") + "Horizontal_RIMG", document.getElementById(tt) ? k = n("#" + tt) : (k = n(pt).css({ width: i.arrowsize, position: "absolute", zIndex: ft }), k.attr("id", tt), k.attr("src", i.harrowrightimg), u.append(k), k.mousedown(function () { clearInterval(e), rt(1, !0), e = window.setInterval(function () { rt(1, !0) }, 200) }), k.mouseup(function () { clearInterval(e) }), k.mouseout(function () { clearInterval(e) })) } function tr() { var n, t; o.css({ height: u.outerHeight() - i.railsize - i.arrowsize * 2, top: i.arrowsize }), c.css({ top: i.arrowsize }), s.css({ width: u.outerWidth() - i.railsize - i.arrowsize * 2, top: u.outerHeight() - i.railsize, left: i.arrowsize }), h.css({ top: u.outerHeight() - (i.railsize + i.barsize) / 2, left: i.arrowsize }), n = Math.max(r.outerHeight() / r[0].scrollHeight * o.outerHeight(), i.minscrollbarsize), c.css({ height: n + "px" }), t = Math.max(r.outerWidth() / r[0].scrollWidth * s.outerWidth(), i.minscrollbarsize), h.css({ width: t + "px" }), n + i.arrowsize * 2 >= r.outerHeight() ? (o.hide(), c.hide(), v.hide(), y.hide(), fi = !0) : (o.show(), c.show(), v.show(), y.show()), t + i.arrowsize * 2 >= r.outerWidth() ? (s.hide(), h.hide(), b.hide(), k.hide()) : (s.show(), h.show(), b.show(), k.show()), o.is(":hidden") && (tt.css({ width: ut }), l.css({ width: ut }), u.css({ width: ut }), r.css({ width: ut }), s.css({ width: ut - i.arrowsize * 2 }), t = Math.max(r.outerWidth() / r[0].scrollWidth * s.outerWidth(), i.minscrollbarsize), h.css({ width: t + "px" }), s.css({ top: u.height() - i.railsize }), h.css({ top: u.height() - (i.railsize + i.barsize) / 2 })), s.is(":hidden") && (o.is(":hidden") ? (u.css({ height: f.height() }), r.css({ height: f.height() })) : (u.css({ height: ot }), r.css({ height: ot })), o.css({ height: ot - i.arrowsize * 2 }), n = Math.max(r.outerHeight() / r[0].scrollHeight * o.outerHeight(), i.minscrollbarsize), c.css({ height: n + "px" })), v.css({ top: 0 }), y.css({ top: o.outerHeight() + i.arrowsize }), b.css({ top: r.outerHeight() }), k.css({ top: r.outerHeight(), left: s.outerWidth() + i.arrowsize }), i.arrowsize == 0 && (v.hide(), y.hide(), b.hide(), k.hide()) } function g(n, t, u) { var f = n, e, s, l; (t || u) && (e = 0, e = t ? n * parseInt(i.wheelstep) / 100 : n, f = parseInt(c.css("top")) + e * (r.outerHeight() / r[0].scrollHeight * o.outerHeight() - 1), s = r.outerHeight() - c.outerHeight() - i.arrowsize, f = Math.min(Math.max(f, i.arrowsize), s), c.css({ top: f + "px" })), l = (parseInt(c.css("top")) - i.arrowsize) / (o.outerHeight() - c.outerHeight()), f = l * (r[0].scrollHeight - r.outerHeight()), r.scrollTop(f), i.freezesize == 0 || h.is(":hidden") || (f + r.outerHeight() > r[0].scrollHeight && (f = r[0].scrollHeight - r.outerHeight()), p.scrollTop(f)) } function rt(n, t) { var u = n, f, e, o; t && (f = n, u = parseInt(h.css("left")) + f * (r.outerWidth() / r[0].scrollWidth * s.outerWidth() - 1), e = r.outerWidth() - h.outerWidth() - i.arrowsize, u = Math.min(Math.max(u, i.arrowsize), e), h.css({ left: u + "px" })), o = (parseInt(h.css("left")) - i.arrowsize) / (s.outerWidth() - h.outerWidth()), u = o * (r[0].scrollWidth - r.outerWidth()), u + l.outerWidth() > l[0].scrollWidth && (u = l[0].scrollWidth - l.outerWidth()), r.scrollLeft(u), l.scrollLeft(u) } function ir() { var u, r, t; if (st.show(), i.headerrowcount > 1) for (t = 1; t < i.headerrowcount; t++) a.children().eq(t).show(); if (lt.find("td").each(function (t) { n(this).children().eq(0).css("width", "auto"), ht.children().eq(t).children().eq(0).css("width", "auto"), n(this).children().eq(0).css("width", "auto") }), u = et.children().eq(0), r = [], lt.find("td").each(function (t) { var i = n(this)[0].childNodes[0].offsetWidth + 1; r[t] = i, n(this).children().eq(0).css({ width: i }) }), rr(), lt.find("td").each(function (n) { for (var s = r[n], f, e, o, t = 0; t < i.headerrowcount; t++) (f = w[t][n], f != "RS" && f != "CS") && (e = f.split(":")[0], e != "N") && (o = f.split(":")[1], u.children().eq(t).children().eq(o).children().eq(0).css({ width: s })) }), st.hide(), i.headerrowcount > 1) for (t = 1; t < i.headerrowcount; t++) a.children().eq(t).hide() } function rr() { for (var n = [], t = 0; t < i.headerrowcount; t++) w[t] = [], n[t] = 0; return lt.find("td").each(function (t) { for (var o, e, f, u, r = 0; r < i.headerrowcount; r++) if (w[r][t] != "RS" && w[r][t] != "CS") { if (o = a.children().eq(r).children().eq(n[r]), n[r]++, e = o.attr("rowspan"), f = o.attr("colspan"), e = e ? parseInt(e) : 1, f = f ? parseInt(f) : 1, e != 1) for (u = r; u < e; u++) w[u][t] = "RS"; if (f != 1) { for (u = 1; u < f; u++) w[r][u + t] = "CS"; w[r][t] = "N:" + (n[r] - 1) } f == 1 && (w[r][t] = "Y:" + (n[r] - 1)) } }), w } function ur() { a.find("td").each(function () { for (var r = n(this)[0].childNodes.length, i, t = 0; t < r; t++) i = n(this)[0].childNodes[t], i.tagName == "DIV" && alert(i.style.position); n(this)[0].innerHTML = "<div>" + n(this)[0].innerHTML + "<\/div>" }) } var i = n.extend({ width: 500, height: 300, railcolor: "#F0F0F0", barcolor: "#CDCDCD", barhovercolor: "#606060", bgcolor: "#F0F0F0", freezesize: 0, arrowsize: 0, varrowtopimg: "", varrowbottomimg: "", harrowleftimg: "", harrowrightimg: "", headerrowcount: 1, railsize: 15, barsize: 15, wheelstep: 20, minscrollbarsize: 30 }, t), e = null, hi = !0, a = null, st = null, lt = null, at = !1, fi = !1, nt = "<div><\/div>", pt = "<img />", tt = null, u = null, l = null, r = null, o = null, c = null, v = null, y = null, s = null, h = null, b = null, k = null, it = null, p = null, et = null, ht = null, f = null, wt = null, d = null, w = [], ci = 0, li = 0, ft = 0, ct = -1, f = n(this), bt, kt, dt, gt, ni, ti, ii, oi, ot, vt, si, vi, ui, yi; if (f[0] && (a = f.children().eq(0), !(a.children().length < 2))) { n.browser.msie && jQuery.browser.version == "7.0" || f.css({ position: "relative" }); var ut = i.width, fr = i.height, ei = f.attr("id") + "Wrapper"; if (document.getElementById(ei) ? wt = n("#" + ei) : (wt = n(nt), wt.attr("id", ei), f.parent().wrap(wt)), bt = f.attr("id") + "PanelHeader", document.getElementById(bt) ? tt = n("#" + bt) : (tt = n(nt), tt.attr("id", bt), f.parent().before(tt)), tt.css({ background: i.bgcolor }), kt = f.attr("id") + "PanelItem", document.getElementById(kt) ? u = n("#" + kt) : (u = n(nt), u.attr("id", kt), f.parent().before(u)), u.css({ background: i.bgcolor }), dt = f.attr("id") + "PanelHeaderContent", document.getElementById(dt) ? (l = n("#" + dt), l.scrollLeft(0), l.scrollTop(0)) : (l = n(nt).css({ background: "#FFFFFF" }), l.attr("id", dt), l.appendTo(tt)), gt = f.attr("id") + "PanelItemContent", document.getElementById(gt) ? (r = n("#" + gt), r.scrollLeft(0), r.scrollTop(0)) : (r = n(nt).css({ background: "#FFFFFF" }), r.attr("id", gt), r.appendTo(u), f.parent().appendTo(r)), st = a.children().eq(0), st.attr("id", f.attr("id") + "Header"), lt = a.children().eq(i.headerrowcount), ni = f.attr("id") + "Copy", document.getElementById(ni) ? et = n("#" + ni) : (et = f.clone().children().remove().end(), et.attr("id", ni), et.appendTo(l), ur(), hi = !1), ti = st.attr("id") + "Copy", document.getElementById(ti)) ht = n("#" + ti); else if (ht = st.clone(!1), ht.attr("id", ti), yt(ht, "Copy"), ht.appendTo(et), i.headerrowcount > 1) for (ii = 1; ii < i.headerrowcount; ii++) oi = a.children().eq(ii).clone(!1), yt(oi, "Copy"), oi.appendTo(et); if (ot = fr - tt.height(), vt = f.attr("id") + "PagerBottom", document.getElementById(vt)) d = n("#" + vt), d[0] && d.width(ut); else { var ri = a.children().eq(a.children().length - 1), er = ri.children().eq(0), ai = er.children().eq(0).children().eq(0); ai[0] != null && ai[0].tagName == "TABLE" && (document.getElementById(vt) || (d = n(nt), d.attr("id", vt), d.addClass(ri[0].className), u.after(d), ri.children().eq(0).appendTo(d), d.width(ut)), ri.remove()) } if (d && d[0] && (ot -= d.height()), u.css({ position: "relative", overflow: "hidden", width: ut, height: ot }), r.css({ overflow: "hidden", width: u.outerWidth() - i.railsize, height: ot - i.railsize, zIndex: ci }), tt.css({ position: "relative", overflow: "hidden", width: ut }), l.css({ overflow: "hidden", width: u.outerWidth() - i.railsize, zIndex: ci }), ir(), i.freezesize != 0 && di(), nr(), tr(), i.freezesize == 0 || s.is(":hidden") ? (si = l.attr("id") + "Freeze", vi = r.attr("id") + "Freeze", document.getElementById(si) && (n("#" + si).hide(), n("#" + vi).hide())) : bi(), !hi) return r.hover(function () { at = !0 }, function () { at = !1 }), i.freezesize == 0 || s.is(":hidden") || p.hover(function () { at = !0 }, function () { at = !1 }), ui = function (n) { if (at && !o.is(":hidden")) { var n = n || window.event, t = 0; n.wheelDelta && (t = -n.wheelDelta / 120), n.detail && (t = n.detail / 3), g(t, !0), n.preventDefault && !fi && n.preventDefault(), fi || (n.returnValue = !1) } }, yi = function () { window.addEventListener ? (this.addEventListener("DOMMouseScroll", ui, !1), this.addEventListener("mousewheel", ui, !1)) : document.attachEvent("onmousewheel", ui) }, yi(), this } } }), jQuery.fn.extend({ gridviewScroll: jQuery.fn.gridviewScroll }) })(jQuery)
var windowSize;
// Don't try this - $(window).load(function ()
function pageLoad() {
windowSize = $(window).width();
gridviewScroll();
}
$(window).resize(function () {
windowSize = $(window).width();
gridviewScroll();
});
function gridviewScroll() {
$('#<%=GridView1.ClientID%>').gridviewScroll({
width: windowSize-44,
height: 500,
freezesize: 3
});
}
</script>
これを見てください、それは私が見つけたこのクエリも解決しました。