Fatal编程技术网
  • jquery/
  • jquery树菜单中的粘性

jquery树菜单中的粘性

jquery asp.net tree

jquery树菜单中的粘性,jquery,asp.net,tree,sticky,Jquery,Asp.net,Tree,Sticky,在我的应用程序中有一个由jquery支持的动态树菜单，我正在尝试实现一个粘性的。树中的所有父节点最初都会折叠，如果用户打开一个父节点，然后滚动到父节点之前，我希望父节点字段保持在菜单的顶部，直到用户滚动到最后一个子节点之前。此时，父对象将解粘 </HeaderTemplate> <ItemTemplate> <div id="divNinjaViewField"

在我的应用程序中有一个由jquery支持的动态树菜单，我正在尝试实现一个粘性的。树中的所有父节点最初都会折叠，如果用户打开一个父节点，然后滚动到父节点之前，我希望父节点字段保持在菜单的顶部，直到用户滚动到最后一个子节点之前。此时，父对象将解粘

                </HeaderTemplate>
                <ItemTemplate>
                    <div id="divNinjaViewField" runat="server" objecttype="field" datatype='<%#Container.DataItem.DataType%>' haschildren='<%#If(Container.DataItem.HasChildren, True, False)%>' class='<%#If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren) And (Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren), "parentFieldItem nondrag isNumeric",
                                                                                                                                                                                                            If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren), "parentFieldItem nondrag",
                                                                                                                                                                                                                         If(Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren, "field-item isNumeric",
                                                                                                                                                                                                                         "field-item")))%>'
                        style="margin-left: 0;" fieldid='<%# Container.DataItem.ID%>' path="" onclick="ParentDivClicked(this, true)" isnumeric='<%# Container.DataItem.IsNumeric %>'>
                        <div class="clearfix viewField" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                            <span class='<%#If(Container.DataItem.HasChildren, "ui-icon ui-icon-triangle-1-e", "icon-placeholder")%> <%#If(Container.DataItem.IsNumeric, "isNumeric", "")%>' style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                            <%# Container.DataItem.FriendlyName%>
                        </div>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    <div id="divAdvancedOptions" onclick="AdvancedOptionsDivClicked(this, true)" class="advancedSourceOptions">
                        <div id="divAdvancedColumnOptions" runat="server" class="AdvancedOptions">
                            <div class="clearfix" style="color: #000; font-weight: bold; cursor: pointer; padding: 4px; margin-left: 12px;" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                                <span class="ui-icon ui-icon-triangle-1-e advancedColumnOptions" style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                                Advanced Column Options
                                <div class="specificAdvancedColumnOptions" style="display: none; font-weight: normal; padding: 4px; margin-left: 24px;">
                                    <div class="advancedOptionItem">
                                        <a id="calculatedFieldLink" href="#" onclick="toggleExpressionEditor(0, true);" class="db_link" style="width: 100%; padding-bottom: 200px;">Calculated Column</a>
                                    </div>

                                    <div class="advancedOptionItem">
                                        <a id="conditionalFieldLink" href="#" runat="server" onserverclick="conditionalFieldLink_ServerClick" class="db_link" style="width: 100%;">Conditional Column</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </FooterTemplate>
有些孩子也是父母。因此，在很多情况下，我希望多位家长都能站在最高层。我所拥有的一切都很好，但也有些奇怪

                </HeaderTemplate>
                <ItemTemplate>
                    <div id="divNinjaViewField" runat="server" objecttype="field" datatype='<%#Container.DataItem.DataType%>' haschildren='<%#If(Container.DataItem.HasChildren, True, False)%>' class='<%#If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren) And (Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren), "parentFieldItem nondrag isNumeric",
                                                                                                                                                                                                            If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren), "parentFieldItem nondrag",
                                                                                                                                                                                                                         If(Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren, "field-item isNumeric",
                                                                                                                                                                                                                         "field-item")))%>'
                        style="margin-left: 0;" fieldid='<%# Container.DataItem.ID%>' path="" onclick="ParentDivClicked(this, true)" isnumeric='<%# Container.DataItem.IsNumeric %>'>
                        <div class="clearfix viewField" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                            <span class='<%#If(Container.DataItem.HasChildren, "ui-icon ui-icon-triangle-1-e", "icon-placeholder")%> <%#If(Container.DataItem.IsNumeric, "isNumeric", "")%>' style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                            <%# Container.DataItem.FriendlyName%>
                        </div>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    <div id="divAdvancedOptions" onclick="AdvancedOptionsDivClicked(this, true)" class="advancedSourceOptions">
                        <div id="divAdvancedColumnOptions" runat="server" class="AdvancedOptions">
                            <div class="clearfix" style="color: #000; font-weight: bold; cursor: pointer; padding: 4px; margin-left: 12px;" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                                <span class="ui-icon ui-icon-triangle-1-e advancedColumnOptions" style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                                Advanced Column Options
                                <div class="specificAdvancedColumnOptions" style="display: none; font-weight: normal; padding: 4px; margin-left: 24px;">
                                    <div class="advancedOptionItem">
                                        <a id="calculatedFieldLink" href="#" onclick="toggleExpressionEditor(0, true);" class="db_link" style="width: 100%; padding-bottom: 200px;">Calculated Column</a>
                                    </div>

                                    <div class="advancedOptionItem">
                                        <a id="conditionalFieldLink" href="#" runat="server" onserverclick="conditionalFieldLink_ServerClick" class="db_link" style="width: 100%;">Conditional Column</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </FooterTemplate>
当滚动到子对象旁边时，字段会粘在顶部并按预期消失。但是，如果两个父节点是打开的，则第二个节点不会像假定的那样解除连接；不管发生什么，它总是挂在顶端

                </HeaderTemplate>
                <ItemTemplate>
                    <div id="divNinjaViewField" runat="server" objecttype="field" datatype='<%#Container.DataItem.DataType%>' haschildren='<%#If(Container.DataItem.HasChildren, True, False)%>' class='<%#If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren) And (Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren), "parentFieldItem nondrag isNumeric",
                                                                                                                                                                                                            If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren), "parentFieldItem nondrag",
                                                                                                                                                                                                                         If(Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren, "field-item isNumeric",
                                                                                                                                                                                                                         "field-item")))%>'
                        style="margin-left: 0;" fieldid='<%# Container.DataItem.ID%>' path="" onclick="ParentDivClicked(this, true)" isnumeric='<%# Container.DataItem.IsNumeric %>'>
                        <div class="clearfix viewField" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                            <span class='<%#If(Container.DataItem.HasChildren, "ui-icon ui-icon-triangle-1-e", "icon-placeholder")%> <%#If(Container.DataItem.IsNumeric, "isNumeric", "")%>' style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                            <%# Container.DataItem.FriendlyName%>
                        </div>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    <div id="divAdvancedOptions" onclick="AdvancedOptionsDivClicked(this, true)" class="advancedSourceOptions">
                        <div id="divAdvancedColumnOptions" runat="server" class="AdvancedOptions">
                            <div class="clearfix" style="color: #000; font-weight: bold; cursor: pointer; padding: 4px; margin-left: 12px;" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                                <span class="ui-icon ui-icon-triangle-1-e advancedColumnOptions" style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                                Advanced Column Options
                                <div class="specificAdvancedColumnOptions" style="display: none; font-weight: normal; padding: 4px; margin-left: 24px;">
                                    <div class="advancedOptionItem">
                                        <a id="calculatedFieldLink" href="#" onclick="toggleExpressionEditor(0, true);" class="db_link" style="width: 100%; padding-bottom: 200px;">Calculated Column</a>
                                    </div>

                                    <div class="advancedOptionItem">
                                        <a id="conditionalFieldLink" href="#" runat="server" onserverclick="conditionalFieldLink_ServerClick" class="db_link" style="width: 100%;">Conditional Column</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </FooterTemplate>
我尝试使用console.log进行调试，但每当我写入控制台时，它就会抛出一个js异常“replace不是undefined的成员”

                </HeaderTemplate>
                <ItemTemplate>
                    <div id="divNinjaViewField" runat="server" objecttype="field" datatype='<%#Container.DataItem.DataType%>' haschildren='<%#If(Container.DataItem.HasChildren, True, False)%>' class='<%#If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren) And (Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren), "parentFieldItem nondrag isNumeric",
                                                                                                                                                                                                            If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren), "parentFieldItem nondrag",
                                                                                                                                                                                                                         If(Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren, "field-item isNumeric",
                                                                                                                                                                                                                         "field-item")))%>'
                        style="margin-left: 0;" fieldid='<%# Container.DataItem.ID%>' path="" onclick="ParentDivClicked(this, true)" isnumeric='<%# Container.DataItem.IsNumeric %>'>
                        <div class="clearfix viewField" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                            <span class='<%#If(Container.DataItem.HasChildren, "ui-icon ui-icon-triangle-1-e", "icon-placeholder")%> <%#If(Container.DataItem.IsNumeric, "isNumeric", "")%>' style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                            <%# Container.DataItem.FriendlyName%>
                        </div>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    <div id="divAdvancedOptions" onclick="AdvancedOptionsDivClicked(this, true)" class="advancedSourceOptions">
                        <div id="divAdvancedColumnOptions" runat="server" class="AdvancedOptions">
                            <div class="clearfix" style="color: #000; font-weight: bold; cursor: pointer; padding: 4px; margin-left: 12px;" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                                <span class="ui-icon ui-icon-triangle-1-e advancedColumnOptions" style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                                Advanced Column Options
                                <div class="specificAdvancedColumnOptions" style="display: none; font-weight: normal; padding: 4px; margin-left: 24px;">
                                    <div class="advancedOptionItem">
                                        <a id="calculatedFieldLink" href="#" onclick="toggleExpressionEditor(0, true);" class="db_link" style="width: 100%; padding-bottom: 200px;">Calculated Column</a>
                                    </div>

                                    <div class="advancedOptionItem">
                                        <a id="conditionalFieldLink" href="#" runat="server" onserverclick="conditionalFieldLink_ServerClick" class="db_link" style="width: 100%;">Conditional Column</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </FooterTemplate>
jquery、css和html如下所示。非常感谢您的帮助

                </HeaderTemplate>
                <ItemTemplate>
                    <div id="divNinjaViewField" runat="server" objecttype="field" datatype='<%#Container.DataItem.DataType%>' haschildren='<%#If(Container.DataItem.HasChildren, True, False)%>' class='<%#If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren) And (Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren), "parentFieldItem nondrag isNumeric",
                                                                                                                                                                                                            If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren), "parentFieldItem nondrag",
                                                                                                                                                                                                                         If(Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren, "field-item isNumeric",
                                                                                                                                                                                                                         "field-item")))%>'
                        style="margin-left: 0;" fieldid='<%# Container.DataItem.ID%>' path="" onclick="ParentDivClicked(this, true)" isnumeric='<%# Container.DataItem.IsNumeric %>'>
                        <div class="clearfix viewField" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                            <span class='<%#If(Container.DataItem.HasChildren, "ui-icon ui-icon-triangle-1-e", "icon-placeholder")%> <%#If(Container.DataItem.IsNumeric, "isNumeric", "")%>' style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                            <%# Container.DataItem.FriendlyName%>
                        </div>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    <div id="divAdvancedOptions" onclick="AdvancedOptionsDivClicked(this, true)" class="advancedSourceOptions">
                        <div id="divAdvancedColumnOptions" runat="server" class="AdvancedOptions">
                            <div class="clearfix" style="color: #000; font-weight: bold; cursor: pointer; padding: 4px; margin-left: 12px;" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                                <span class="ui-icon ui-icon-triangle-1-e advancedColumnOptions" style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                                Advanced Column Options
                                <div class="specificAdvancedColumnOptions" style="display: none; font-weight: normal; padding: 4px; margin-left: 24px;">
                                    <div class="advancedOptionItem">
                                        <a id="calculatedFieldLink" href="#" onclick="toggleExpressionEditor(0, true);" class="db_link" style="width: 100%; padding-bottom: 200px;">Calculated Column</a>
                                    </div>

                                    <div class="advancedOptionItem">
                                        <a id="conditionalFieldLink" href="#" runat="server" onserverclick="conditionalFieldLink_ServerClick" class="db_link" style="width: 100%;">Conditional Column</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </FooterTemplate>
JQuery

  var _currentGenertion;
    var _loaded;
    var _initialTop;

    function ManageFieldListScroller() {
        $(".fields-list").scroll(function () {
            var divTop = $(".fields-list").position().top;
            var newTop = $('.field-item').position().top;
            if(newTop < _initialTop) {    
                stickParentFields(divTop)   //scroll up
            } else {
                restickParentFields(divTop) //scroll down
            }
             _initialTop = newTop;
        });
    }

    function restickParentFields(divTop) {
        $(".openedParent.unstuck").each(function () {
            var $nextParent = $(this);
            var top = $nextParent.position().top - 1; //"-1" because browsers are stupid
            var distanceToTopOfList = top - divTop
            var doIt = distanceToTopOfList <= 0

            $("div[path='" + $nextParent.attr('fieldid') + "']").each(function (i, item) {
                var $nextChild = $('#' + item.id);
                var nextChildTop = $nextChild.position().top
            var maxChildTop;
                if(i==0) {
                    minChildTop = nextChildTop;
                    maxChildTop = nextChildTop;
                } else {
                    if(nextChildTop < minChildTop) {
                        minChildTop = nextChildTop;
                    } else if(nextChildTop > maxChildTop) {
                        maxChildTop = nextChildTop;
                    } 
                }

                if (maxChildTop > divTop) {
                    _currentGenertion = _currentGenertion + 1;
                    var className = 'sticky' + _currentGenertion
                    $nextParent.removeClass('unstuck');
                    $nextParent.addClass('sticky');
                    $nextParent.addClass(className);
                }


            });
        });

        $(".openedParent.sticky").each(function () {  
            var $nextParent = $(this);
            var top = $nextParent.position().top - 1; //"-1" because browsers are stupid
            var distanceToTopOfList = top - divTop
            var doIt = distanceToTopOfList <= 0
            $("div[path='" + $nextParent.attr('fieldid') + "']").each(function (i, item) {
                var $nextChild = $('#' + item.id);
                var nextChildTop = $nextChild.position().top                  
                var minChildTop;
                if(i==0) {
                    minChildTop = nextChildTop;

                } else {
                    if(nextChildTop < minChildTop) {
                        minChildTop = nextChildTop;
                    } 
                }
                if (minChildTop > divTop) {
                    var parentClasses = $nextParent.attr('class')
                    var parentClassesArray = parentClasses.split(/\s+/)
                    $nextParent.addClass('unstuck');
                    $.each(parentClassesArray, function (i, css) {
                        var $currentClass = $(css)
                        if (css.indexOf('sticky') >= 0) {
                            $nextParent.removeClass(css);
                            Unstuck = true
                        }
                    });
                    if (Unstuck == true) {
                        _currentGenertion = _currentGenertion - 1;
                    }
                } 
            }); 
        });
    }


function stickParentFields(divTop) {
    $(".openedParent").not('.unstuck').each(function () {
        var $nextParent = $(this);
        var top = $nextParent.position().top - 1; //"-1" because browsers are stupid
        var distanceToTopOfList = top - divTop
        var doIt = distanceToTopOfList <= 0.5
        var className = 'sticky' + _currentGenertion;
        if (doIt) {
            stickParentField(className, divTop, $nextParent)

            var scrolledPastField = true;
            $("div[path='" + $nextParent.attr('fieldid') + "']").each(function (i, item) {
                var $nextChild = $('#' + item.id);
                var nextChildTop = $nextChild.position().top
                var topDifference = nextChildTop - top;
                if (nextChildTop > top) {
                    scrolledPastField = false;
                }
            });

            //  ------------------------------------------------ Unstick Fields ---------------------------------------------
            if (scrolledPastField == false) {
                //return false;
            }
            else {
                var parentClasses = $nextParent.attr('class')
                var parentClassesArray = parentClasses.split(/\s+/)
                $nextParent.addClass('unstuck');
                $.each(parentClassesArray, function (i, css) {
                    var $currentClass = $(css)
                    if (css.indexOf('sticky') >= 0) {
                        $nextParent.removeClass(css);
                    }
                });
                _currentGenertion = _currentGenertion - 1;
            }
        }
    });
}

function stickParentField(className, divTop, $nextParent) {
    var parentClasses = $nextParent.attr('class')
    if (parentClasses.indexOf(className) < 0) {
        var stickyDivCount;
        var nextClassName;
        var nextClassTop;
        className = 'sticky' + _currentGenertion
        stickyDivCount = $('.sticky').length
        _currentGenertion = stickyDivCount + 1
        nextClassName = 'sticky' + _currentGenertion
        nextClassTop = (stickyDivCount * 30) + divTop
        $("<style type='text/css'> ." + nextClassName + "{ top:" + nextClassTop + "px;} </style>").appendTo("head");
        var newUpperMargin = _currentGenertion * 20;
        var newHeight = $(".fields-list").height() - 20;
        $nextParent.addClass('sticky');
        $(".fields-list").css("margin-top", newUpperMargin);
        $(".fields-list").height(newHeight);
        $nextParent.removeClass('unstuck');
        $nextParent.addClass(nextClassName);
        $nextParent.css();
}

    $(document).ready(function () {
        if (_loaded != true) {
            _loaded = true;
            _currentGenertion = 1;
            _initialTop = $('.field-item').position().top 
        }
        ManageFieldListScroller();
    });

                </HeaderTemplate>
                <ItemTemplate>
                    <div id="divNinjaViewField" runat="server" objecttype="field" datatype='<%#Container.DataItem.DataType%>' haschildren='<%#If(Container.DataItem.HasChildren, True, False)%>' class='<%#If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren) And (Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren), "parentFieldItem nondrag isNumeric",
                                                                                                                                                                                                            If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren), "parentFieldItem nondrag",
                                                                                                                                                                                                                         If(Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren, "field-item isNumeric",
                                                                                                                                                                                                                         "field-item")))%>'
                        style="margin-left: 0;" fieldid='<%# Container.DataItem.ID%>' path="" onclick="ParentDivClicked(this, true)" isnumeric='<%# Container.DataItem.IsNumeric %>'>
                        <div class="clearfix viewField" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                            <span class='<%#If(Container.DataItem.HasChildren, "ui-icon ui-icon-triangle-1-e", "icon-placeholder")%> <%#If(Container.DataItem.IsNumeric, "isNumeric", "")%>' style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                            <%# Container.DataItem.FriendlyName%>
                        </div>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    <div id="divAdvancedOptions" onclick="AdvancedOptionsDivClicked(this, true)" class="advancedSourceOptions">
                        <div id="divAdvancedColumnOptions" runat="server" class="AdvancedOptions">
                            <div class="clearfix" style="color: #000; font-weight: bold; cursor: pointer; padding: 4px; margin-left: 12px;" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                                <span class="ui-icon ui-icon-triangle-1-e advancedColumnOptions" style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                                Advanced Column Options
                                <div class="specificAdvancedColumnOptions" style="display: none; font-weight: normal; padding: 4px; margin-left: 24px;">
                                    <div class="advancedOptionItem">
                                        <a id="calculatedFieldLink" href="#" onclick="toggleExpressionEditor(0, true);" class="db_link" style="width: 100%; padding-bottom: 200px;">Calculated Column</a>
                                    </div>

                                    <div class="advancedOptionItem">
                                        <a id="conditionalFieldLink" href="#" runat="server" onserverclick="conditionalFieldLink_ServerClick" class="db_link" style="width: 100%;">Conditional Column</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </FooterTemplate>
HTML

                </HeaderTemplate>
                <ItemTemplate>
                    <div id="divNinjaViewField" runat="server" objecttype="field" datatype='<%#Container.DataItem.DataType%>' haschildren='<%#If(Container.DataItem.HasChildren, True, False)%>' class='<%#If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren) And (Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren), "parentFieldItem nondrag isNumeric",
                                                                                                                                                                                                            If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren), "parentFieldItem nondrag",
                                                                                                                                                                                                                         If(Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren, "field-item isNumeric",
                                                                                                                                                                                                                         "field-item")))%>'
                        style="margin-left: 0;" fieldid='<%# Container.DataItem.ID%>' path="" onclick="ParentDivClicked(this, true)" isnumeric='<%# Container.DataItem.IsNumeric %>'>
                        <div class="clearfix viewField" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                            <span class='<%#If(Container.DataItem.HasChildren, "ui-icon ui-icon-triangle-1-e", "icon-placeholder")%> <%#If(Container.DataItem.IsNumeric, "isNumeric", "")%>' style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                            <%# Container.DataItem.FriendlyName%>
                        </div>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    <div id="divAdvancedOptions" onclick="AdvancedOptionsDivClicked(this, true)" class="advancedSourceOptions">
                        <div id="divAdvancedColumnOptions" runat="server" class="AdvancedOptions">
                            <div class="clearfix" style="color: #000; font-weight: bold; cursor: pointer; padding: 4px; margin-left: 12px;" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                                <span class="ui-icon ui-icon-triangle-1-e advancedColumnOptions" style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                                Advanced Column Options
                                <div class="specificAdvancedColumnOptions" style="display: none; font-weight: normal; padding: 4px; margin-left: 24px;">
                                    <div class="advancedOptionItem">
                                        <a id="calculatedFieldLink" href="#" onclick="toggleExpressionEditor(0, true);" class="db_link" style="width: 100%; padding-bottom: 200px;">Calculated Column</a>
                                    </div>

                                    <div class="advancedOptionItem">
                                        <a id="conditionalFieldLink" href="#" runat="server" onserverclick="conditionalFieldLink_ServerClick" class="db_link" style="width: 100%;">Conditional Column</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </FooterTemplate>


                </HeaderTemplate>
                <ItemTemplate>
                    <div id="divNinjaViewField" runat="server" objecttype="field" datatype='<%#Container.DataItem.DataType%>' haschildren='<%#If(Container.DataItem.HasChildren, True, False)%>' class='<%#If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren) And (Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren), "parentFieldItem nondrag isNumeric",
                                                                                                                                                                                                            If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren), "parentFieldItem nondrag",
                                                                                                                                                                                                                         If(Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren, "field-item isNumeric",
                                                                                                                                                                                                                         "field-item")))%>'
                        style="margin-left: 0;" fieldid='<%# Container.DataItem.ID%>' path="" onclick="ParentDivClicked(this, true)" isnumeric='<%# Container.DataItem.IsNumeric %>'>
                        <div class="clearfix viewField" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                            <span class='<%#If(Container.DataItem.HasChildren, "ui-icon ui-icon-triangle-1-e", "icon-placeholder")%> <%#If(Container.DataItem.IsNumeric, "isNumeric", "")%>' style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                            <%# Container.DataItem.FriendlyName%>
                        </div>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    <div id="divAdvancedOptions" onclick="AdvancedOptionsDivClicked(this, true)" class="advancedSourceOptions">
                        <div id="divAdvancedColumnOptions" runat="server" class="AdvancedOptions">
                            <div class="clearfix" style="color: #000; font-weight: bold; cursor: pointer; padding: 4px; margin-left: 12px;" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                                <span class="ui-icon ui-icon-triangle-1-e advancedColumnOptions" style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                                Advanced Column Options
                                <div class="specificAdvancedColumnOptions" style="display: none; font-weight: normal; padding: 4px; margin-left: 24px;">
                                    <div class="advancedOptionItem">
                                        <a id="calculatedFieldLink" href="#" onclick="toggleExpressionEditor(0, true);" class="db_link" style="width: 100%; padding-bottom: 200px;">Calculated Column</a>
                                    </div>

                                    <div class="advancedOptionItem">
                                        <a id="conditionalFieldLink" href="#" runat="server" onserverclick="conditionalFieldLink_ServerClick" class="db_link" style="width: 100%;">Conditional Column</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </FooterTemplate>


高级列选项

您的第三个代码示例看起来更像asp.net，而不是经典的asp-它不能两者都是。它是asp.net。“classic asp”标记是一个意外事件。您的第三个代码示例看起来更像asp.net而不是classic asp-不可能两者都是。它是asp.net。“经典asp”标签是一个意外。 
                </HeaderTemplate>
                <ItemTemplate>
                    <div id="divNinjaViewField" runat="server" objecttype="field" datatype='<%#Container.DataItem.DataType%>' haschildren='<%#If(Container.DataItem.HasChildren, True, False)%>' class='<%#If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren) And (Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren), "parentFieldItem nondrag isNumeric",
                                                                                                                                                                                                            If((Container.DataItem.IsSibling Or Container.DataItem.HasChildren), "parentFieldItem nondrag",
                                                                                                                                                                                                                         If(Container.DataItem.IsNumeric Or Container.DataItem.HasNumericChildren, "field-item isNumeric",
                                                                                                                                                                                                                         "field-item")))%>'
                        style="margin-left: 0;" fieldid='<%# Container.DataItem.ID%>' path="" onclick="ParentDivClicked(this, true)" isnumeric='<%# Container.DataItem.IsNumeric %>'>
                        <div class="clearfix viewField" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                            <span class='<%#If(Container.DataItem.HasChildren, "ui-icon ui-icon-triangle-1-e", "icon-placeholder")%> <%#If(Container.DataItem.IsNumeric, "isNumeric", "")%>' style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                            <%# Container.DataItem.FriendlyName%>
                        </div>
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    <div id="divAdvancedOptions" onclick="AdvancedOptionsDivClicked(this, true)" class="advancedSourceOptions">
                        <div id="divAdvancedColumnOptions" runat="server" class="AdvancedOptions">
                            <div class="clearfix" style="color: #000; font-weight: bold; cursor: pointer; padding: 4px; margin-left: 12px;" onmouseover="$(this).css('background-color', '#eee');" onmouseout="$(this).css('background-color', '');">
                                <span class="ui-icon ui-icon-triangle-1-e advancedColumnOptions" style='float: left; margin-top: -2px; margin-right: .3em;'></span>
                                Advanced Column Options
                                <div class="specificAdvancedColumnOptions" style="display: none; font-weight: normal; padding: 4px; margin-left: 24px;">
                                    <div class="advancedOptionItem">
                                        <a id="calculatedFieldLink" href="#" onclick="toggleExpressionEditor(0, true);" class="db_link" style="width: 100%; padding-bottom: 200px;">Calculated Column</a>
                                    </div>

                                    <div class="advancedOptionItem">
                                        <a id="conditionalFieldLink" href="#" runat="server" onserverclick="conditionalFieldLink_ServerClick" class="db_link" style="width: 100%;">Conditional Column</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </FooterTemplate>