我有这些表Pages,PageVersions和ElementsOnPageVersions.
我想在一个可折叠的视图中同时在一个页面上显示这个.
像这样:
第1页
第2页
第3页
第4页
我不确定检索数据的最佳方法是什么,并在collapsaple布局中轻松显示.
我会做这样的事情:
这就是我现在这样做的方式.但它似乎太沉重了,而且很多迭代.
最好的方法是什么？
我实际上构建了一些功能非常相似的东西。我可以为您提供 HTML 源代码，但我需要修改 .NET 代码以删除公司特定的专有信息，然后再公开发布该信息（并将其转换为 C#）。
\n\n不幸的是，如果我要根据您的需求修改我的内容，我几乎要花一个月的时间才能完成它（因为我们要休假两周，之前一周很忙）。但您可以查看我的 HTML，看看您可以从中重用哪些内容。根据我对你的请求的理解，你会刮掉我大约一半的 JavaScript 及其功能。但如果我处在你的立场上，我会很感激这段代码作为入门，并废弃我不想要的东西，也许添加一些东西。或者您可能只是认为我的代码是垃圾并且根本不使用它。;P
\n\n这是我的 HTML 和 JavaScript，您可以使用它来运行。它确实使用 ul 和 ol 列表处理节点的折叠和扩展。
\n\n<!DOCTYPE HTML>\n<html>\n <head><title>Oz-Med-Hist-VB</title>\n <meta charset=\'utf-8\' />\n <meta http-equiv=\'X-UA-Compatible\' content=\'IE=EmulateIE8\' />\n <style type=\'text/css\'>\n body { background: #CCC; margin-left: 1.5em; }\n li { list-style-type: none; text-indent: -38px; }\n\n .emptyGrayBox8 {\n background-color: #bbb; /* checked and unchecked background color */\n border: 1px solid #777; /* checked and unchecked border width & style & color */\n padding: 5.5px; display: inline-block; position: relative; margin: 0 3px; margin-top: 3px;\n }\n\n .checkInsideGrayBox:after {\n content: \'X\';\n font-size: 13px;\n position: absolute;\n top: -2px;\n left: 1.5px;\n color: #555;\n }\n\n .checkInsideGrayBoxInsideLI:after {\n content: \'X\';\n font-size: 13px;\n position: absolute;\n top: -2px;\n left: 39.5px;\n color: #555;\n }\n </style>\n <script>\n\n if (navigator.userAgent.indexOf(\'MSIE 8.\') < 0)\n {\n document.write(\n \' <style>\\n\' +\n \' .checkInsideGrayBox { left: 0.5px; }\\n\' +\n \' .checkInsideGrayBoxInsideLI:after { left: 38.5px; }\\n\' +\n \' </style>\');\n }\n\nvar dta =\n{ \'checkedSubNodeCount--1\' : 0\n, \'checkedSubNodeCount--19\' : 0\n, \'checkedSubNodeCount--19-a\': 0\n, \'checkedSubNodeCount--19-b\': 0\n, \'checkedSubNodeCount--19-c\': 0\n, \'checkedSubNodeCount--22\' : 0\n, \'checkedSubNodeCount--24\' : 0\n, \'checkedSubNodeCount--25\' : 0\n, \'checkedSubNodeCount--144\' : 0\n, \'checkedSubNodeCount--1728\': 0\n};\n\nfunction chkBox_click(id) // this gets called when user clicks on checkbox or text to right of checkbox.\n{ // when checkbox becomes checked, then associated group also becomes shown.\n var chkE = document.getElementById(\'chkBox--\' + id); // CHecKBOX HTML element\n var grpE = document.getElementById(\'grpBox--\' + id); // GRouPbox HTML element (UL element)\n var isChecked = chkE.checked;\n if (isChecked)\n { // if user just checked the checkbox, and ...\n if (grpE != null) // if an associated (sub)group exists for this checkbox, ...\n { grpE.style.display = \'\'; } // then expand/show the group element.\n }\n setLabelHtm(id);\n var pid = getParentID(id); // Parent ID\n if (id == null) { return; } // if parent id doesn\'t exist then we\'re done here.\n\n // now \'pid\' is parent ID of \'id\'. for instance:\n // when id == \'19-a\' then pid = \'19\'\n // when id == \'19-a-1-\' then pid = \'19-a\'\n\n var h = \'\';\n var maxLoopCount = 12; // infinite loop protection :P\n while (pid != null && --maxLoopCount >= 0)\n {\n chkE = document.getElementById(\'chkBox--\' + pid); // CHecKBOX element *of parent*\n var pKey = \'checkedSubNodeCount--\' + pid; // Key for this Parent ID\n if (isChecked) { ++dta[pKey]; } else { --dta[pKey]; }\n setLabelHtm(pid);\n if (h.length > 0) { h += \'\\n\\n\'; }\n h += \'id = \' + id + \' isChecked = \' + isChecked\n + \'\\npid = \' + pid + \' chkE = \' + chkE\n + \'\\ndta[\\\'\' + pKey + \'\\\'] = \' + dta[pKey];\n\n pid = getParentID(pid);\n }\n// alert(h);\n} // function chkBox_click(id)\n\nfunction chkBox_click8(id)\n{\n var chkE = document.getElementById(\'chkBox--\' + id); // CHecKBOX element\n var lblE = document.getElementById(\'chkLab--\' + id); // CHecKbox LABel (HTML \'label\' element for the checkbox)\n if (chkE == null || lblE == null) { return; }\n var isChecked = chkE.checked;\n var g = Number(chkE.tag);\n if (isChecked == false) { g = 3; chkE.tag = g; }\n if (isChecked == true ) { g = 2; chkE.tag = g; }\n alert(id + \'\\nisChecked = \' + isChecked + \'\\n.tag = \' + g);\n} // function chkBox_click8(id)\n\nfunction chkBox_clickIt(id)\n{ var chkE = document.getElementById(\'chkBox--\' + id); // CHecKBOX HTML element\n if (chkE != null) { chkE.click(); }\n} // function chkBox_clickIt(id)\n\nfunction getParentID(id)\n{\n var pid = String(id); if (pid.length < 1) { return null; }\n if (pid[pid.length - 1] == \'-\') { pid = pid.substr(0, pid.length - 1); }\n var x = pid.lastIndexOf(\'-\'); if (x < 0) { return null; }\n pid = pid.substr(0, x); // now pid is id of parent\n return pid;\n} // function getParentID(id)\n\nfunction hdrLab_click(id) // this will switch whether the associated group is hidden or shown\n{// var chkE = document.getElementById(\'chkBox--\' + id); // CHecKBOX HTML element\n var grpE = document.getElementById(\'grpBox--\' + id); // GRouPBOX HTML element (UL element)\n if (grpE != null)\n { if (grpE.style.display == \'\')\n { grpE.style.display = \'none\'; }\n else\n { grpE.style.display = \'\'; }\n }\n setLabelHtm(id);\n} // function hdrLab_click(id)\n\nfunction setLabelHtm(id)\n{ var grpE = document.getElementById(\'grpBox--\' + id); // GRouPBOX HTML element (UL element)\n var lblE = document.getElementById(\'hdrLab--\' + id);\n if (lblE == null) { return; }\n var h = null; var suffix = \'.\';\n if (grpE == null) { h = \'<span style="visibility: hidden">+</span>\'; }\n else\n { var grpIsOpen = grpE.style.display == \'\';\n h = \'<b>\' + (grpIsOpen ? \'\xe2\x88\x92\' : \'+\') + \'</b>\';\n }\n var s = String(id);\n if (s.length > 0 && s.substr(s.length - 1) == \'-\') { s = \'•\'; suffix = \'\'; }\n else\n {\n var x = s.lastIndexOf(\'-\') + 1;\n if (x > 0) { s = s.substr(x); }\n }\n h += \' \' + s + suffix;\n\n var cnt = dta[\'checkedSubNodeCount--\' + id]; // CouNT of checked sub-nodes\n if (cnt != null) // if this node is a parent node\n { var chkE = document.getElementById(\'chkBox--\' + id); // CHecKBOX HTML element\n if (chkE != null) { chkE.style.display = (cnt > 0) ? \'none\' : \'\'; }\n var hBeg = \'<span class="emptyGrayBox8">\';\n var hEnd = \'</span>\';\n if (cnt > 0) { h += hBeg + \'<span class="checkInsideGrayBoxInsideLI"></span>\' + hEnd; }\n else if (chkE == null) { h += hBeg + hEnd; }\n }\n lblE.innerHTML = h;\n} // function setLabelHtm(id)\n\nfunction init()\n{ //alert(\'yes\');\n hdrLab_click(\'1\');\n hdrLab_click(\'1-a\');\n hdrLab_click(\'19\');\n hdrLab_click(\'19-a\');\n hdrLab_click(\'19-a-1-\');\n hdrLab_click(\'19-a-2-\');\n hdrLab_click(\'19-b\');\n hdrLab_click(\'19-b-1-\');\n hdrLab_click(\'19-b-2-\');\n hdrLab_click(\'19-b-3-\');\n hdrLab_click(\'19-c\');\n hdrLab_click(\'19-c-1-\');\n hdrLab_click(\'19-c-2-\');\n hdrLab_click(\'19-c-3-\');\n hdrLab_click(\'22\');\n hdrLab_click(\'22-a\');\n hdrLab_click(\'22-b\');\n hdrLab_click(\'23\');\n hdrLab_click(\'24\');\n hdrLab_click(\'24-a\');\n hdrLab_click(\'24-b\');\n hdrLab_click(\'24-c\');\n hdrLab_click(\'25\');\n hdrLab_click(\'25-a-\');\n hdrLab_click(\'144\');\n hdrLab_click(\'144-a\');\n hdrLab_click(\'1728\');\n hdrLab_click(\'1728-a\');\n// alert(dta[\'checkedSubNodeCount--19-a\']);\n}\n window.onload = init;\n </script>\n </head>\n <body>\n<ul style=\'list-style-type: none; margin-left: -1em\'>\n <li><label id=\'hdrLab--1\' onclick=\'hdrLab_click("1")\' tabindex=\'0\' onkeypress=\'this.click(); return false;\'></label><label id=\'txtLab--1\' onclick=\'hdrLab_click("1")\')> Test for short number \'1\':</label></li>\n <ul id=\'grpBox--1\'>\n <li><label id=\'hdrLab--1-a\' onclick=\'hdrLab_click("1-a")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--1-a\' onclick=\'chkBox_click("1-a");\' /><label id=\'txtLab--1-a\' onclick=\'chkBox_clickIt("1-a")\')>Test for short number \'1\' subitem:</label></li>\n </ul>\n <li><label id=\'hdrLab--19\' onclick=\'hdrLab_click("19")\' tabindex=\'0\' onkeypress=\'this.click(); return false;\'></label><label id=\'txtLab--19\' onclick=\'hdrLab_click("19")\')> Which fruit do you prefer?</label></li>\n <ul id=\'grpBox--19\'>\n <li><label id=\'hdrLab--19-a\' onclick=\'hdrLab_click("19-a")\' tabindex=\'0\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-a\' onclick=\'chkBox_click("19-a");\' /><label id=\'txtLab--19-a\' onclick=\'chkBox_clickIt("19-a")\')>Apples:</label></li>\n <ul id=\'grpBox--19-a\'>\n <li><label id=\'hdrLab--19-a-1-\' onclick=\'hdrLab_click("19-a-1-")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-a-1-\' onclick=\'chkBox_click("19-a-1-");\' /><label id=\'txtLab--19-a-1-\' onclick=\'chkBox_clickIt("19-a-1-")\')>Red delicious</label></li>\n <li><label id=\'hdrLab--19-a-2-\' onclick=\'hdrLab_click("19-a-2-")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-a-2-\' onclick=\'chkBox_click("19-a-2-");\' /><label id=\'txtLab--19-a-2-\' onclick=\'chkBox_clickIt("19-a-2-")\')>Granny smith</label></li>\n </ul>\n <li><label id=\'hdrLab--19-b\' onclick=\'hdrLab_click("19-b")\' tabindex=\'0\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-b\' onclick=\'chkBox_click("19-b");\' /><label id=\'txtLab--19-b\' onclick=\'chkBox_clickIt("19-b")\')>Bananas:</label></li>\n <ul id=\'grpBox--19-b\'>\n <li><label id=\'hdrLab--19-b-1-\' onclick=\'hdrLab_click("19-b-1-")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-b-1-\' onclick=\'chkBox_click("19-b-1-");\' /><label id=\'txtLab--19-b-1-\' onclick=\'chkBox_clickIt("19-b-1-")\')>Green</label></li>\n <li><label id=\'hdrLab--19-b-2-\' onclick=\'hdrLab_click("19-b-2-")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-b-2-\' onclick=\'chkBox_click("19-b-2-");\' /><label id=\'txtLab--19-b-2-\' onclick=\'chkBox_clickIt("19-b-2-")\')>Yellow (ripe but not too ripe)</label></li>\n <li><label id=\'hdrLab--19-b-3-\' onclick=\'hdrLab_click("19-b-3-")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-b-3-\' onclick=\'chkBox_click("19-b-3-");\' /><label id=\'txtLab--19-b-3-\' onclick=\'chkBox_clickIt("19-b-3-")\')>Brown (<i>very</i> ripe)</label></li>\n </ul>\n <li><label id=\'hdrLab--19-c\' onclick=\'hdrLab_click("19-c")\' tabindex=\'0\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-c\' onclick=\'chkBox_click("19-c");\' /><label id=\'txtLab--19-c\' onclick=\'chkBox_clickIt("19-c")\')>Juice</label></li>\n <ul id=\'grpBox--19-c\'>\n <li><label id=\'hdrLab--19-c-1-\' onclick=\'hdrLab_click("19-c-1-")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-c-1-\' onclick=\'chkBox_click("19-c-1-");\' /><label id=\'txtLab--19-c-1-\' onclick=\'chkBox_clickIt("19-c-1-")\')>Orange juice</label></li>\n <li><label id=\'hdrLab--19-c-2-\' onclick=\'hdrLab_click("19-c-2-")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-c-2-\' onclick=\'chkBox_click("19-c-2-");\' /><label id=\'txtLab--19-c-2-\' onclick=\'chkBox_clickIt("19-c-2-")\')>Grape juice</label></li>\n <li><label id=\'hdrLab--19-c-3-\' onclick=\'hdrLab_click("19-c-3-")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--19-c-3-\' onclick=\'chkBox_click("19-c-3-");\' /><label id=\'txtLab--19-c-3-\' onclick=\'chkBox_clickIt("19-c-3-")\')>Tomato juice</label></li>\n </ul>\n </ul>\n <li><label id=\'hdrLab--22\' onclick=\'hdrLab_click("22")\' tabindex=\'0\' onkeypress=\'this.click(); return false;\'></label><label id=\'txtLab--22\' onclick=\'hdrLab_click("22")\')> Which juice do you prefer?</label></li>\n <ul id=\'grpBox--22\'>\n <li><label id=\'hdrLab--22-a\' onclick=\'hdrLab_click("22-a")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--22-a\' onclick=\'chkBox_click("22-a");\' /><label id=\'txtLab--22-a\' onclick=\'chkBox_clickIt("22-a")\')>Apple juice</label></li>\n <li><label id=\'hdrLab--22-b\' onclick=\'hdrLab_click("22-b")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--22-b\' onclick=\'chkBox_click("22-b");\' /><label id=\'txtLab--22-b\' onclick=\'chkBox_clickIt("22-b")\')>Orange juice</label></li>\n </ul>\n <li><label id=\'hdrLab--23\' onclick=\'hdrLab_click("23")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--23\' onclick=\'chkBox_click("23");\' /><label id=\'txtLab--23\' onclick=\'chkBox_clickIt("23")\')>Single checkmark question with no subnodes</label></li>\n <li><label id=\'hdrLab--24\' onclick=\'hdrLab_click("24")\' tabindex=\'0\' onkeypress=\'this.click(); return false;\'></label><label id=\'txtLab--24\' onclick=\'hdrLab_click("24")\')> Best OS?</label></li>\n <ul id=\'grpBox--24\'>\n <li><label id=\'hdrLab--24-a\' onclick=\'hdrLab_click("24-a")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--24-a\' onclick=\'chkBox_click("24-a");\' /><label id=\'txtLab--24-a\' onclick=\'chkBox_clickIt("24-a")\') style=\'color:green\'>Android!</label></li>\n <li><label id=\'hdrLab--24-b\' onclick=\'hdrLab_click("24-b")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--24-b\' onclick=\'chkBox_click("24-b");\' /><label id=\'txtLab--24-b\' onclick=\'chkBox_clickIt("24-b")\') style=\'color:brown\'>Apple</label></li>\n <li><label id=\'hdrLab--24-c\' onclick=\'hdrLab_click("24-c")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--24-c\' onclick=\'chkBox_click("24-c");\' /><label id=\'txtLab--24-c\' onclick=\'chkBox_clickIt("24-c")\')>Linux</label></li>\n </ul>\n <li><label id=\'hdrLab--25\' onclick=\'hdrLab_click("25")\' tabindex=\'0\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--25\' onclick=\'chkBox_click("25");\' /><label id=\'txtLab--25\' onclick=\'chkBox_clickIt("25")\')>Check question with subnode check too.</label></li>\n <ul id=\'grpBox--25\'>\n <li><label id=\'hdrLab--25-a-\' onclick=\'hdrLab_click("25-a-")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--25-a-\' onclick=\'chkBox_click("25-a-");\' /><label id=\'txtLab--25-a-\' onclick=\'chkBox_clickIt("25-a-")\')>Sub-node check question</label></li>\n </ul>\n <li><label id=\'hdrLab--144\' onclick=\'hdrLab_click("144")\' tabindex=\'0\' onkeypress=\'this.click(); return false;\'></label><label id=\'txtLab--144\' onclick=\'hdrLab_click("144")\')> Test for 3-digit number:</label></li>\n <ul id=\'grpBox--144\'>\n <li><label id=\'hdrLab--144-a\' onclick=\'hdrLab_click("144-a")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--144-a\' onclick=\'chkBox_click("144-a");\' /><label id=\'txtLab--144-a\' onclick=\'chkBox_clickIt("144-a")\')>Test for 3-digit number subitem:</label></li>\n </ul>\n <li><label id=\'hdrLab--1728\' onclick=\'hdrLab_click("1728")\' tabindex=\'0\' onkeypress=\'this.click(); return false;\'></label><label id=\'txtLab--1728\' onclick=\'hdrLab_click("1728")\')> Test for 4-digit number:</label></li>\n <ul id=\'grpBox--1728\'>\n <li><label id=\'hdrLab--1728-a\' onclick=\'hdrLab_click("1728-a")\' onkeypress=\'this.click(); return false;\'></label><input type=\'checkbox\' id=\'chkBox--1728-a\' onclick=\'chkBox_click("1728-a");\' /><label id=\'txtLab--1728-a\' onclick=\'chkBox_clickIt("1728-a")\')>Test for 4-digit number subitem:</label></li>\n </ul>\n</ul>\n<div style=\'display: none\'>\n<script>\n var ua = navigator.userAgent;\n var ieVersion = null;\n var ix = 0;\n for (var v = 7; v <= 99; v++)\n {\n document.write(\'<!--[if IE \' + v + \']><hr />According to the conditional comment this is IE \' + v + \'.<![endif]-->\');\n if ((ix = ua.indexOf(\'MSIE \' + v + \'.\')) >= 0)\n { ieVersion = \'\';\n ix += 5;\n while (ix < ua.length && \'1234567890.\'.indexOf(ua.charAt(ix)) >= 0)\n { ieVersion += ua.charAt(ix++);\n } document.write(\'<hr />According to JavaScript, this is IE \' + ieVersion);\n }\n }\n if (ieVersion == null)\n { document.write(\'<hr />According to JavaScript, this IE version could not be determined.\');\n } document.write(\'<hr />navigator.userAgent = \' + navigator.userAgent);\n</script><hr />\n <button id=\'webBtn1\'>Fire an event</button>\n <button id=\'btnHi\' onclick=\'window.external.sayHelloFromJavaScript("Hello from JavaScript!", 5);\'>Say Hello</button>\n</div>\n </body>\n</html>\n我还注意到，我的项目使用了为 IE 构建的 WebControl，该控件需要早在 WinXP 就可以工作。所以我的使用能力受到限制，因为它必须适用于 IE 7，但好处是它可以追溯到 WinXP\ 最新的 IE 工作版本。我也关心使用符合标准的代码，因此据我所知，我的 JavaScript 也适用于任何符合标准的浏览器。我在最新版本的 Chrome 和 FF、IE 10、IE 8 和 IE 7 中进行了测试。
\n\n仍然需要大量代码才能将数据生成到 HTML 页面中，但这可以解决您一半的请求。
\n\n在我的 .NET 代码中，我必须构建这些 JavaScript 和 HTML 列表，我可以在几周内提供这些列表。
\n| 归档时间： |
|
| 查看次数： |
224 次 |
| 最近记录： |