none
GridView 用Jquery实现 固定表头、固定列、可记忆列宽,调整列的位置,隐藏列。 RRS feed

  • 常规讨论

  • 小弟正在学习asp.net ajax,总是觉得为什么微软不出一个类似JqGrid的控件,可以实现如题的功能。经过东平西凑,好歹用Gridview实现了固定表头、固定列,调整列宽。

    我的环境是XP SP3+ .net4 +vs2010 +SQL2005 +IE8 ,以下是我实现的方法,大家帮忙研究研究:

    • JS文件
    1. jquery-1.4.3.min.js 这个下载就有啦
    2. superTables.js 这个是google来的,可以实现固定表头,列,后面我加上了google来的调整列宽的JS,东改改西改改,总算可以。
    3. jquery.superTable.js 这个是别人写的扩展Supertable的函数,方便页面调用。
    • 我的问题:
    1. 虽可以实现,但必须在aspx.vb中注册一个脚本解决局部更新后失效的问题,是不是这个原因导致效率下降,大家看看有没有其他的解决方法。
    2. 最后一个列不可以向右拖动,向左拖动却可以?
    3. Gridview的排序会出现闪烁,局部更新失效,大家帮忙看看为什么?
    4. 目前还没实现,可记忆列宽、调整列的位置,隐藏列,调整列的位置和隐藏我想在第一次加载的时候实现就好了,但记忆列宽,需要在调整列宽之后,把列宽的信息送回数据库,请问各位,JS是怎么回送这些数据的?能否简单给个例子参考参考?
    • 以下是全部的代码
    • superTables.js
    /////////////////////////////////////////////////////////////////////////////////////////
    
    // Super Tables v0.30 - MIT Style License
    
    // Copyright (c) 2008 Matt Murphy --- www.matts411.com
    
    //
    
    // Contributors:
    
    // Joe Gallo
    
    /////////////////////////////////////////////////////////////////////////////////////////
    
    ////// TO CALL: 
    
    // new superTable([string] tableId, [object] options);
    
    //
    
    ////// OPTIONS: (order does not matter )
    
    // cssSkin : string ( eg. "sDefault", "sSky", "sOrange", "sDark" )
    
    // headerRows : integer ( default is 1 )
    
    // fixedCols : integer ( default is 0 )
    
    // colWidths : integer array ( use -1 for auto sizing )
    
    // onStart : function ( any this.variableNameHere variables you create here can be used later ( eg. onFinish function ) )
    
    // onFinish : function ( all this.variableNameHere variables created in this script can be used in this function )
    
    //
    
    ////// EXAMPLES:
    
    // var myST = new superTable("myTableId");
    
    //
    
    // var myST = new superTable("myTableId", {
    
    //		cssSkin : "sDefault",
    
    //		headerRows : 1,
    
    //		fixedCols : 2,
    
    //		colWidths : [100, 230, 220, -1, 120, -1, -1, 120],
    
    //		onStart : function () {
    
    //			this.start = new Date();
    
    //		},
    
    //		onFinish : function () {
    
    //			alert("Finished... " + ((new Date()) - this.start) + "ms.");
    
    //		}
    
    // });
    
    //
    
    ////// ISSUES / NOTES:
    
    // 1. No quirksmode support (officially, but still should work)
    
    // 2. Element id's may be duplicated when fixedCols > 0, causing getElementById() issues
    
    // 3. Safari will render the header row incorrectly if the fixed header row count is 1 and there is a colspan > 1 in one 
    
    //		or more of the cells (fix available)
    
    /////////////////////////////////////////////////////////////////////////////////////////
    
    
    var
     superTable = function
     (tableId, options) {
     /////* Initialize */
    
     options = options || {};
     this
    .cssSkin = options.cssSkin || ""
    ;
     this
    .headerRows = parseInt(options.headerRows || "1"
    );
     this
    .fixedCols = parseInt(options.fixedCols || "0"
    );
     this
    .colWidths = options.colWidths || [];
     this
    .initFunc = options.onStart || null
    ;
     this
    .callbackFunc = options.onFinish || null
    ;
     this
    .initFunc && this
    .initFunc();
    
     /////* Create the framework dom */
    
     this
    .sBase = document.createElement("DIV"
    );
     this
    .sFHeader = this
    .sBase.cloneNode(false
    );
     this
    .sHeader = this
    .sBase.cloneNode(false
    );
     this
    .sHeaderInner = this
    .sBase.cloneNode(false
    );
     this
    .sFData = this
    .sBase.cloneNode(false
    );
     this
    .sFDataInner = this
    .sBase.cloneNode(false
    );
     this
    .sData = this
    .sBase.cloneNode(false
    );
     this
    .sColGroup = document.createElement("COLGROUP"
    );
    
     this
    .sDataTable = document.getElementById(tableId);
     this
    .sDataTable.style.margin = "0px"
    ; /* Otherwise looks bad */
    
     if
     (this
    .cssSkin !== ""
    ) {
      this
    .sDataTable.className += " "
     + this
    .cssSkin;
     }
     if
     (this
    .sDataTable.getElementsByTagName("COLGROUP"
    ).length > 0) {
      this
    .sDataTable.removeChild(this
    .sDataTable.getElementsByTagName("COLGROUP"
    )[0]); /* Making our own */
    
     }
     this
    .sParent = this
    .sDataTable.parentNode;
     this
    .sParentHeight = this
    .sParent.offsetHeight;
     this
    .sParentWidth = this
    .sParent.offsetWidth;
    
     /////* Attach the required classNames */
    
     this
    .sBase.className = "sBase"
    ;
     this
    .sFHeader.className = "sFHeader"
    ;
     this
    .sHeader.className = "sHeader"
    ;
     this
    .sHeaderInner.className = "sHeaderInner"
    ;
     this
    .sFData.className = "sFData"
    ;
     this
    .sFDataInner.className = "sFDataInner"
    ;
     this
    .sData.className = "sData"
    ;
    
     /////* Clone parts of the data table for the new header table */
    
     var
     alpha, beta, touched, clean, cleanRow, i, j, k, m, n, p;
     this
    .sHeaderTable = this
    .sDataTable.cloneNode(false
    );
     if
     (this
    .sDataTable.tHead) {
      alpha = this
    .sDataTable.tHead;
      this
    .sHeaderTable.appendChild(alpha.cloneNode(false
    ));
      beta = this
    .sHeaderTable.tHead;
     } else
     {
      alpha = this
    .sDataTable.tBodies[0];
      this
    .sHeaderTable.appendChild(alpha.cloneNode(false
    ));
      beta = this
    .sHeaderTable.tBodies[0];
     }
     alpha = alpha.rows;
     for
     (i = 0; i < this
    .headerRows; i++) {
      beta.appendChild(alpha[i].cloneNode(true
    ));
     }
     this
    .sHeaderInner.appendChild(this
    .sHeaderTable);
    
     if
     (this
    .fixedCols > 0) {
      this
    .sFHeaderTable = this
    .sHeaderTable.cloneNode(true
    );
      this
    .sFHeader.appendChild(this
    .sFHeaderTable);
      this
    .sFDataTable = this
    .sDataTable.cloneNode(true
    );
      this
    .sFDataInner.appendChild(this
    .sFDataTable);
      this
    .sFHeaderTable.id = "sFHeaderTable"
    ;
      this
    .sHeaderTable.id = "sHeaderTable"
    ;
      this
    .sFDataTable.id = "sFDataTable"
    ;
      this
    .sDataTable.id = "sDataTable"
    ;
    
     }
    
     /////* Set up the colGroup */
    
     alpha = this
    .sDataTable.tBodies[0].rows;
     for
     (i = 0, j = alpha.length; i < j; i++) {
      clean = true
    ;
      for
     (k = 0, m = alpha[i].cells.length; k < m; k++) {
       if
     (alpha[i].cells[k].colSpan !== 1 || alpha[i].cells[k].rowSpan !== 1) {
        i += alpha[i].cells[k].rowSpan - 1;
        clean = false
    ;
        break
    ;
       }
      }
      if
     (clean === true
    ) break
    ; /* A row with no cells of colSpan > 1 || rowSpan > 1 has been found */
    
     }
     cleanRow = (clean === true
    ) ? i : 0; /* Use this row index to calculate the column widths */
    
     for
     (i = 0, j = alpha[cleanRow].cells.length; i < j; i++) {
      if
     (i === this
    .colWidths.length || this
    .colWidths[i] === -1) {
       if
     (parseInt(alpha[cleanRow].cells[i].offsetWidth) > 160) { //max ColumnWidth
    
        this
    .colWidths[i] = "160px"
    ; //max ColumnWidth
    
       } else
     {
        this
    .colWidths[i] = alpha[cleanRow].cells[i].offsetWidth;
       }
      }
     }
     for
     (i = 0, j = this
    .colWidths.length; i < j; i++) {
      this
    .sColGroup.appendChild(document.createElement("COL"
    ));
      this
    .sColGroup.lastChild.setAttribute("width"
    , this
    .colWidths[i])
      //  this.sColGroup.lastChild.setAttribute("id", i);
    
     }
     this
    .sDataTable.insertBefore(this
    .sColGroup.cloneNode(true
    ), this
    .sDataTable.firstChild);
     this
    .sHeaderTable.insertBefore(this
    .sColGroup.cloneNode(true
    ), this
    .sHeaderTable.firstChild);
     if
     (this
    .fixedCols > 0) {
      this
    .sFDataTable.insertBefore(this
    .sColGroup.cloneNode(true
    ), this
    .sFDataTable.firstChild);
      this
    .sFHeaderTable.insertBefore(this
    .sColGroup.cloneNode(true
    ), this
    .sFHeaderTable.firstChild);
     }
    
     /////* Style the tables individually if applicable */
    
     if
     (this
    .cssSkin !== ""
    ) {
      this
    .sDataTable.className += " "
     + this
    .cssSkin + "-Main"
    ;
      this
    .sHeaderTable.className += " "
     + this
    .cssSkin + "-Headers"
    ;
      if
     (this
    .fixedCols > 0) {
       this
    .sFDataTable.className += " "
     + this
    .cssSkin + "-Fixed"
    ;
       this
    .sFHeaderTable.className += " "
     + this
    .cssSkin + "-FixedHeaders"
    ;
      }
     }
    
     /////* Throw everything into sBase */
    
     if
     (this
    .fixedCols > 0) {
      this
    .sBase.appendChild(this
    .sFHeader);
     }
     this
    .sHeader.appendChild(this
    .sHeaderInner);
     this
    .sBase.appendChild(this
    .sHeader);
     if
     (this
    .fixedCols > 0) {
      this
    .sFData.appendChild(this
    .sFDataInner);
      this
    .sBase.appendChild(this
    .sFData);
     }
     this
    .sBase.appendChild(this
    .sData);
     this
    .sParent.insertBefore(this
    .sBase, this
    .sDataTable);
     this
    .sData.appendChild(this
    .sDataTable);
    
    
     /////* Align the tables */
    
     var
     sDataStyles, sDataTableStyles;
     this
    .sHeaderHeight = this
    .sDataTable.tBodies[0].rows[(this
    .sDataTable.tHead) ? 0 : this
    .headerRows].offsetTop;
     sDataTableStyles = "margin-top: "
     + (this
    .sHeaderHeight * -1) + "px;"
    ;
     sDataStyles = "margin-top: "
     + this
    .sHeaderHeight + "px;"
    ;
     sDataStyles += "height: "
     + (this
    .sParentHeight - this
    .sHeaderHeight) + "px;"
    ;
     if
     (this
    .fixedCols > 0) {
      /* A collapsed table's cell's offsetLeft is calculated differently (w/ or w/out border included) across broswers - adjust: */
    
      this
    .sFHeaderWidth = this
    .sDataTable.tBodies[0].rows[cleanRow].cells[this
    .fixedCols].offsetLeft;
      if
     (window.getComputedStyle) {
       alpha = document.defaultView;
       beta = this
    .sDataTable.tBodies[0].rows[0].cells[0];
       if
     (navigator.taintEnabled) { /* If not Safari */
    
        this
    .sFHeaderWidth += Math.ceil(parseInt(alpha.getComputedStyle(beta, null
    ).getPropertyValue("border-right-width"
    )) / 2);
       } else
     {
        this
    .sFHeaderWidth += parseInt(alpha.getComputedStyle(beta, null
    ).getPropertyValue("border-right-width"
    ));
       }
      } else
     if
     (/*@cc_on!@*/
    0) { /* Internet Explorer */
    
       alpha = this
    .sDataTable.tBodies[0].rows[0].cells[0];
       beta = [alpha.currentStyle["borderRightWidth"
    ], alpha.currentStyle["borderLeftWidth"
    ]];
       if
     (/px/i.test(beta[0]) && /px/i.test(beta[1])) {
        beta = [parseInt(beta[0]), parseInt(beta[1])].sort();
        this
    .sFHeaderWidth += Math.ceil(parseInt(beta[1]) / 2);
       }
      }
    
      /* Opera 9.5 issue - a sizeable data table may cause the document scrollbars to appear without this: */
    
      if
     (window.opera) {
       this
    .sFData.style.height = this
    .sParentHeight + "px"
    ;
      }
    
      this
    .sFHeader.style.width = this
    .sFHeaderWidth + "px"
    ;
      sDataTableStyles += "margin-left: "
     + (this
    .sFHeaderWidth * -1) + "px;"
    ;
      sDataStyles += "margin-left: "
     + this
    .sFHeaderWidth + "px;"
    ;
      sDataStyles += "width: "
     + (this
    .sParentWidth - this
    .sFHeaderWidth) + "px;"
    ;
     } else
     {
      sDataStyles += "width: "
     + this
    .sParentWidth + "px;"
    ;
     }
     this
    .sData.style.cssText = sDataStyles;
     this
    .sDataTable.style.cssText = sDataTableStyles;
    
     /////* Set up table scrolling and IE's onunload event for garbage collection */
    
     (function
     (st) {
      if
     (st.fixedCols > 0) {
       st.sData.onscroll = function
     () {
        st.sHeaderInner.style.right = st.sData.scrollLeft + "px"
    ;
        st.sFDataInner.style.top = (st.sData.scrollTop * -1) + "px"
    ;
       };
      } else
     {
       st.sData.onscroll = function
     () {
        st.sHeaderInner.style.right = st.sData.scrollLeft + "px"
    ;
       };
      }
      if
     (/*@cc_on!@*/
    0) { /* Internet Explorer */
    
       window.attachEvent("onunload"
    , function
     () {
        st.sData.onscroll = null
    ;
        st = null
    ;
       });
      }
     })(this
    );
    
     this
    .callbackFunc && this
    .callbackFunc();
    
     //Edit SuperTable To Be Resizable//////////////////////////////////
    
    
    
     // true when a header is currently being resized
    
     var
     _isResizing;
     // a reference to the header column that is being resized
    
     var
     _element;
     // an array of all of the tables header cells
    
     var
     _ths;
     // _ths = $get('sHeadertable').getElementsByTagName('colgroup');
    
     _ths = this
    .sHeaderTable.getElementsByTagName('th'
    );
    
     // if the grid has at least one th element
    
     if
     (_ths.length > 1) {
    
      for
     (i = 0; i < _ths.length; i++) {
       _ths[i].setAttribute("id"
    , i);
       // determine the widths
    
       //   _ths[i].style.width = Sys.UI.DomElement.getBounds(_ths[i]).width + 'px';
    
    
       // attach the mousemove and mousedown events
    
       if
     (i >= this
    .fixedCols) {
        $addHandler(_ths[i], 'mousemove'
    , _onMouseMove);
        $addHandler(_ths[i], 'mousedown'
    , _onMouseDown);
       }
      }
    
      // add a global mouseup handler   
    
      $addHandler(document, 'mouseup'
    , _onMouseUp);
      // add a global selectstart handler
    
      $addHandler(document, 'selectstart'
    , _onSelectStart);
     }
     
     function
     _onMouseMove(args) {
      if
     (_isResizing) {
    
       // determine the new width of the header
    
       var
     bounds = Sys.UI.DomElement.getBounds(_element);
       var
     width = args.clientX - bounds.x;
    
       // we set the minimum width to 1 px, so make
    
       // sure it is at least this before bothering to
    
       // calculate the new width
    
       if
     (width > 1) {
    
        // get the next th element so we can adjust its size as well
    
        //     var nextColumn = _element.nextSibling;
    
        //     var nextColumnWidth;
    
        //     if(width < _toNumber(_element.style.width)){
    
        //      // make the next column bigger
    
        //      nextColumnWidth = _toNumber(nextColumn.style.width) + _toNumber(_element.style.width) - width;
    
        //     }
    
        //     else if(width > _toNumber(_element.style.width)){
    
        //      // make the next column smaller
    
        //      nextColumnWidth = _toNumber(nextColumn.style.width) - (width - _toNumber(_element.style.width));
    
        //     } 
    
        //     
    
        //     // we also don't want to shrink this width to less than one pixel,
    
        //     // so make sure of this before resizing ...
    
        //     if(nextColumnWidth > 1){
    
        //      _element.style.width = width + 'px';
    
        //      nextColumn.style.width = nextColumnWidth + 'px';
    
        //     }
    
        //    _element.style.width = width + 'px';
    
        var
     thID = _element.id
        
        $get('sHeaderTable'
    ).getElementsByTagName('col'
    )[thID].width = width + 'px'
    ;
        $get('sFHeaderTable'
    ).getElementsByTagName('col'
    )[thID].width = width + 'px'
    ;
        $get('sDataTable'
    ).getElementsByTagName('col'
    )[thID].width = width + 'px'
    ;
        $get('sFDataTable'
    ).getElementsByTagName('col'
    )[thID].width = width + 'px'
    ;
    
    
       }
      }
      else
     {
       // get the bounds of the element. If the mouse cursor is within
    
       // 2px of the border, display the e-cursor -> cursor:e-resize
    
       var
     bounds2 = Sys.UI.DomElement.getBounds(args.target);
       if
     (Math.abs((bounds2.x + bounds2.width) - (args.clientX)) <= 2) {
        args.target.style.cursor = 'e-resize'
    ;
       }
       else
     {
        args.target.style.cursor = ''
    ;
       }
      }
     }
    
     function
     _onMouseDown(args) {
      // if the user clicks the mouse button while
    
      // the cursor is in the resize position, it means
    
      // they want to start resizing. Set _isResizing to true
    
      // and grab the th element that is being resized
    
      if
     (args.target.style.cursor == 'e-resize'
    ) {
       _isResizing = true
    ;
       _element = args.target;
      }
     }
    
     function
     _onMouseUp(args) {
      // the user let go of the mouse - so
    
      // they are done resizing the header. Reset
    
      // everything back
    
      if
     (_isResizing) {
    
       // set back to default values
    
       _isResizing = false
    ;
       _element = null
    ;
    
       // make sure the cursor is set back to default
    
       for
     (i = 0; i < _ths.length; i++) {
        _ths[i].style.cursor = ''
    ;
       }
      }
     }
    
     function
     _onSelectStart(args) {
      // Don't allow selection during drag
    
      if
     (_isResizing) {
       args.preventDefault();
       return
     false
    ;
      }
     }
    
     function
     _toNumber(m) {
      // helper function to peel the px off of the widths
    
      return
     new
     Number(m.replace('px'
    , ''
    ));
     }
     //Edit SuperTable To Be Resizable//////////////////////////////////
    
    };
    
    


    • jquery.superTable.js
    /////////////////////////////////////////////////////////////////////////////////////////
    
    // Super Tables Plugin for jQuery - MIT Style License
    
    // Copyright (c) 2009 Jeffrey Lee --- blog.darkthread.net
    
    //
    
    // A wrapper for Matt Murphy's Super Tables http://www.matts411.com/post/super_tables/
    
    //
    
    // Contributors:
    
    //
    
    /////////////////////////////////////////////////////////////////////////////////////////
    
    ////// TO CALL: 
    
    // $("...").toSuperTable(options)
    
    //
    
    ////// OPTIONS: (order does not matter )
    
    // cssSkin : string ( eg. "sDefault", "sSky", "sOrange", "sDark" )
    
    // headerRows : integer ( default is 1 )
    
    // fixedCols : integer ( default is 0 )
    
    // colWidths : integer array ( use -1 for auto sizing )
    
    // onStart : function ( any this.variableNameHere variables you create here can be used later ( eg. onFinish function ) )
    
    // onFinish : function ( all this.variableNameHere variables created in this script can be used in this function )
    
    // margin, padding, width, height, overflow...: Styles for "fakeContainer"
    
    //
    
    ////// Example:
    
    // $("#GridView1").toSuperTable(
    
    //    { width: "640px", height: "480px", fixedCols: 2,
    
    //    onFinish: function() { alert('Done!'); } })
    
    
    (function
    ($) {
     $.fn.extend(
       {
        toSuperTable: function
    (options) {
         var
     setting = $.extend(
         {
          width: "640px"
    , height: "320px"
    ,
          margin: "10px"
    , padding: "0px"
    ,
          overflow: "hidden"
    ,
          colWidths:undefined,
          fixedCols: 0, headerRows: 1,
          onStart: function
    () { },
          onFinish: function
    () { },
          cssSkin: "sSky"
    
         }, options);
         return
     this
    .each(function
    () {
          var
     q = $(this
    );
          var
     id = q.attr("id"
    );
          q.removeAttr("style"
    ).wrap("<div id='"
     + id + "_box'></div>"
    );
    
          var
     nonCssProps = ["fixedCols"
    , "headerRows"
    , "onStart"
    , "onFinish"
    , "cssSkin"
    , "colWidths"
    ];
          var
     container = $("#"
     + id + "_box"
    );
    
          for
     (var
     p in
     setting) {
           if
     ($.inArray(p, nonCssProps) == -1) {
            container.css(p, setting[p]);
            delete
     setting[p];
           }
          }
          
          var
     mySt = new
     superTable(id, setting);
    
         });
        }
       });
    })(jQuery);
    
    
    

    • 已编辑 hugo.sheh 2010年11月16日 14:16
    2010年11月16日 7:32

全部回复

    • CSS
      /*
      ///////////////////////////////////////////////////////////////////////////////////////// 
      // Super Tables - Skin Classes
      // Remove if not needed
      ///////////////////////////////////////////////////////////////////////////////////////// 
      */
      
      /* sDefault */
      .sDefault {
      	margin: 0px;
      	padding: 0px;
      	border: none;
      	font-family: Verdana, Arial, sans serif;
      	font-size: 0.9em;
      }
      body.sDefault th, .sDefault td {
      	border: 1px solid #cccccc;
      	padding: 3px 6px 3px 4px;
      	white-space: nowrap;
      	font-size:0.9em;
      }
      body.sDefault th {
      	background-color: #e5e5e5;
      	border-color: #c5c5c5;
      	font-size:0.9em;
      }
      body.sDefault-Fixed {
      	background-color: #eeeeee;
      	border-color: #c5c5c5;
      	font-size:0.9em;
      }
      
      /* sSky */
      body.sSky {
      	margin: 0px;
      	padding: 0px;
      	border: none;
      	font-family: Verdana, Arial, sans serif;
      	font-size: 0.9em;
      
      }
      body.sSky th, .sSky td
      {
      	border: 1px solid #9eb6ce;
      	padding: 0px 2px 0px 2px;
      	font-size: 0.9em;
      	white-space:nowrap;
      	overflow:auto;
        
      	/*text-overflow:ellipsis;*/
      
      }
      body.sSky th {
      	background-color: #CFDCEE;
      	font-size:0.9em;
      	
      }
      body.sSky-Fixed {
      	background-color: #e4ecf7;
      	font-size:0.9em;
      }
      
      /* sOrange */
      .sOrange {
      	margin: 0px;
      	padding: 0px;
      	border: none;
      	font-family: Verdana, Arial, sans serif;
      	font-size: 1em;
      }
      .sOrange th, .sOrange td {
      	border: 1px solid #cebb9e;
      	padding: 3px 6px 3px 4px;
      	white-space: nowrap;
      }
      .sOrange th {
      	background-color: #ECD8C7;
      }
      .sOrange-Fixed {
      	background-color: #f7ede4;
      }
      
      /* sDark */
      .sDark {
      	margin: 0px;
      	padding: 0px;
      	border: none;
      	font-family: Verdana, Arial, sans serif;
      	font-size: 1em;
      	color: #ffffff;
      }
      .sDark th, .sDark td {
      	border: 1px solid #555555;
      	padding: 3px 6px 3px 4px;
      	white-space: nowrap;
      }
      .sDark th {
      	background-color: #000000;
      }
      .sDark-Fixed {
      	background-color: #222222;
      }
      .sDark-Main {
      	background-color: #333333;
      }
      .altRow { background-color: #ddddff; }
      
    • test.aspx
    • <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Item_test" %>
      
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head id="Head1" runat="server">
        <title></title>
        
        <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
        
        <script src="../Scripts/MyJS/jquery-1.4.3.min.js" type="text/javascript"></script>
        <script src="../Scripts/MyJS/superTables.js" type="text/javascript"></script>
         <script src="../Scripts/MyJS/jquery.superTable.js" type="text/javascript"></script>
       
      
      </head>
      <body>
        <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1"
          runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <h2>
          <asp:Label ID="ttl" runat="server" text="<%$ Resources:Res,Suppliers %>"></asp:Label>
        </h2>
        
          &nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:LinqDataSource ID="LinqDataSource1" runat="server" 
                  ContextTypeName="DataClassesDataContext" 
                  EnableDelete="True" EnableInsert="True" 
                  EnableUpdate="True" EntityTypeName="" 
                  TableName="supplier" Where="SPID=5" >
                  <WhereParameters>
                    <asp:Parameter Name="newparameter" />
                  </WhereParameters>
                </asp:LinqDataSource>
                <asp:QueryExtender ID="QueryExtender1" runat="server" TargetControlID="LinqDataSource1">
                  <asp:SearchExpression SearchType="Contains" DataFields="SpNo,SpName,SpTag,SpAddr,SpLinkMan,SpTel,SpFax,SpMob,SpEmail,Remark">
                    <asp:ControlParameter ControlID="TextBox1" />
                  </asp:SearchExpression>
                </asp:QueryExtender>      
                &nbsp;<asp:TextBox ID="TextBox1" runat="server">
                </asp:TextBox>&nbsp; <asp:LinkButton ID="btnSearch" runat="server" 
                  Text="<%$ Resources:Res,Search %>" ForeColor="Blue" Font-Size="Medium"/>
              <asp:GridView ID="GridView1" runat="server" AllowSorting="True" 
                  DataSourceID="LinqDataSource1" 
                  AutoGenerateColumns="False" DataKeyNames="SPID">
                <Columns>
                  <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                      
                      <asp:ImageButton ID="LinkButton2" runat="server" 
                        CausesValidation="False" CommandName="Delete" 
                        AlternateText="<%$ Resources:Res,Delete %>" ImageUrl="~/Images/Delete.gif"
                        OnClientClick="return DeleteConfirm();"/>
                      <asp:ImageButton ID="LinkButton1" runat="server" 
                        CausesValidation="False" CommandName="Select" 
                        AlternateText="<%$ Resources:Res,Edit %>" ImageUrl="~/Images/Edit.gif"/>
                        
                    </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField>
                    <ItemTemplate>
                      <%# Convert.ToInt32(DataBinder.Eval(Container, "DataItemIndex")) + 1 %>
                    </ItemTemplate>
                  </asp:TemplateField>
                  
                  <asp:BoundField DataField="SPID" HeaderText="<%$ Resources:Res,C_ID %>" 
                    InsertVisible="False" ReadOnly="True" 
                    SortExpression="SPID" />
                  <asp:BoundField DataField="SPNo" HeaderText="<%$ Resources:Res,C_No %>" 
                    SortExpression="SPNo" />
                  <asp:BoundField DataField="SpName" HeaderText="<%$ Resources:Res,C_SpName %>" 
                    SortExpression="SpName" />
                  <asp:BoundField DataField="SpTag" HeaderText="<%$ Resources:Res,C_SpTag %>" 
                    SortExpression="SpTag" />
                  <asp:BoundField DataField="spAddr" HeaderText="<%$ Resources:Res,C_spAddr %>" 
                    SortExpression="spAddr" />
                  <asp:BoundField DataField="spLinkman" HeaderText="<%$ Resources:Res,C_spLinkman %>"
                     SortExpression="spLinkman" />
                  <asp:BoundField DataField="spTel" HeaderText="<%$ Resources:Res,C_spTel %>" 
                    SortExpression="spTel" />
                  <asp:BoundField DataField="spFax" HeaderText="<%$ Resources:Res,C_spFax %>" 
                    SortExpression="spFax" />
                  <asp:BoundField DataField="spMob" HeaderText="<%$ Resources:Res,C_spMob %>" 
                    SortExpression="spMob" />
                  <asp:BoundField DataField="spEmail" HeaderText="<%$ Resources:Res,C_spEmail %>" 
                    SortExpression="spEmail" />
                  <asp:BoundField DataField="remark" HeaderText="<%$ Resources:Res,C_remark %>" 
                    SortExpression="remark" />
                  <asp:CheckBoxField DataField="InUnion" HeaderText="<%$ Resources:Res,C_InUnion %>" 
                    SortExpression="InUnion" />
                </Columns>
              </asp:GridView>
                
            </ContentTemplate>
          </asp:UpdatePanel>
        </form>
      </body>
      </html> <br/>
      
      
    • test.aspx.vb
    Partial Class Item_Test
      Inherits System.Web.UI.Page
    
    
    
      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim strScript As String = "$(function () {$('#" + Me.GridView1.ClientID + "').toSuperTable({width: ""960px"", height: ""400px"", fixedCols: 2}).find('tr:even').addClass(""altRow"");});"
        ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "FixedGridView", strScript, True)
        
      End Sub
    
    
    End Class
    
    2010年11月16日 7:40
  • 直接用jqgrid就是,前端优秀的表格插件很多...
    2013年7月3日 9:42