用过flexiGrid插件的请进。

Question

如题，怎么给flexigrid 首列添加checkbox。。网上的伪代码太多了，我都试过了，不行。

Answer 1

附上修改后的js代码
/*
 * Flexigrid for jQuery - New Wave Grid
 *
 * Copyright (c) 2008 Paulo P. Marinas (webplicity.net/flexigrid)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * $Date: 2008-07-14 00:09:43 +0800 (Tue, 14 Jul 2008) $
 */
 
(function($) {    $.addFlex = function(t, p) {        if (t.grid) return false; //return if already exist         // apply default properties
        p = $.extend({
            height: 200, //default height
            width: 'auto', //auto width
            striped: true, //apply odd even stripes
            novstripe: false,
            minwidth: 30, //min width of columns
            minheight: 80, //min height of columns
            resizable: true, //resizable table
            url: false, //ajax url
            method: 'POST', // data sending method
            dataType: 'json', // type of data loaded
            errormsg: 'Connection Error',
            usepager: true, //
            nowrap: true, //
            page: 1, //current page
            total: 1, //total pages
            useRp: true, //use the results per page select box
            rp: 15, // results per page
            rpOptions: [10, 15, 20, 25, 40],
            title: false,
            pagestat: '显示 {from} 到 {to} 条, 共 {total} 条记录',
            procmsg: '数据获取中 ...',
            query: '',
            qtype: '',
            nomsg: '没有数据',
            minColToggle: 1, //minimum allowed column to be hidden
            showToggleBtn: true, //show or hide column toggle popup
            hideOnSubmit: true,
            autoload: false,
            blockOpacity: 0.5,
            onToggleCol: false,
            onChangeSort: false,
            onSuccess: false,
            onSubmit: false, // using a custom populate function
            addcheck: false
        }, p);
        $(t)
.show() //show if hidden
.attr({ cellPadding: 0, cellSpacing: 0, border: 0 })  //remove padding and spacing
.removeAttr('width') //remove width properties
;        //create grid class
        var g = {
            hset: {},
            rePosDrag: function() {                var cdleft = 0 - this.hDiv.scrollLeft;
                if (this.hDiv.scrollLeft > 0) cdleft -= Math.floor(p.cgwidth / 2);
                $(g.cDrag).css({ top: g.hDiv.offsetTop + 1 });
                var cdpad = this.cdpad;                $('div', g.cDrag).hide();                $('thead tr:first th:visible', this.hDiv).each
(
  function() {
      var n = $('thead tr:first th:visible', g.hDiv).index(this);       var cdpos = parseInt($('div', this).width());
      var ppos = cdpos;
      if (cdleft == 0)
          cdleft -= Math.floor(p.cgwidth / 2);       cdpos = cdpos + cdleft + cdpad;       $('div:eq(' + n + ')', g.cDrag).css({ 'left': cdpos + 'px' }).show();       cdleft = cdpos;
  }
);            },
            fixHeight: function(newH) {
                newH = false;
                if (!newH) newH = $(g.bDiv).height();
                var hdHeight = $(this.hDiv).height();
                $('div', this.cDrag).each(
function() {
    $(this).height(newH + hdHeight);
}
);                var nd = parseInt($(g.nDiv).height());                if (nd > newH)
                    $(g.nDiv).height(newH).width(200);
                else
                    $(g.nDiv).height('auto').width('auto');                $(g.block).css({ height: newH, marginBottom: (newH * -1) });                var hrH = g.bDiv.offsetTop + newH;
                if (p.height != 'auto' && p.resizable) hrH = g.vDiv.offsetTop;
                $(g.rDiv).css({ height: hrH });            },
            dragStart: function(dragtype, e, obj) { //default drag function start
                if (dragtype == 'colresize') //column resize
                {
                    $(g.nDiv).hide(); $(g.nBtn).hide();
                    var n = $('div', this.cDrag).index(obj);
                    var ow = $('th:visible div:eq(' + n + ')', this.hDiv).width();
                    $(obj).addClass('dragging').siblings().hide();
                    $(obj).prev().addClass('dragging').show();                    this.colresize = { startX: e.pageX, ol: parseInt(obj.style.left), ow: ow, n: n };
                    $('body').css('cursor', 'col-resize');
                }
                else if (dragtype == 'vresize') //table resize
                {
                    var hgo = false;
                    $('body').css('cursor', 'row-resize');
                    if (obj) {
                        hgo = true;
                        $('body').css('cursor', 'col-resize');
                    }
                    this.vresize = { h: p.height, sy: e.pageY, w: p.width, sx: e.pageX, hgo: hgo };                }                else if (dragtype == 'colMove') //column header drag
                {
                    $(g.nDiv).hide(); $(g.nBtn).hide();
                    this.hset = $(this.hDiv).offset();
                    this.hset.right = this.hset.left + $('table', this.hDiv).width();
                    this.hset.bottom = this.hset.top + $('table', this.hDiv).height();
                    this.dcol = obj;
                    this.dcoln = $('th', this.hDiv).index(obj);                    this.colCopy = document.createElement("div");
                    this.colCopy.className = "colCopy";
                    this.colCopy.innerHTML = obj.innerHTML;
                    if ($.browser.msie) {
                        this.colCopy.className = "colCopy ie";
                    }
                    $(this.colCopy).css({ position: 'absolute', float: 'left', display: 'none', textAlign: obj.align });
                    $('body').append(this.colCopy);
                    $(this.cDrag).hide();                }                $('body').noSelect();            },

Answer 2

 dragMove: function(e) {                if (this.colresize) //column resize
                {
                    var n = this.colresize.n;
                    var diff = e.pageX - this.colresize.startX;
                    var nleft = this.colresize.ol + diff;
                    var nw = this.colresize.ow + diff;
                    if (nw > p.minwidth) {
                        $('div:eq(' + n + ')', this.cDrag).css('left', nleft);
                        this.colresize.nw = nw;
                    }
                }
                else if (this.vresize) //table resize
                {
                    var v = this.vresize;
                    var y = e.pageY;
                    var diff = y - v.sy;                    if (!p.defwidth) p.defwidth = p.width;                    if (p.width != 'auto' && !p.nohresize && v.hgo) {
                        var x = e.pageX;
                        var xdiff = x - v.sx;
                        var newW = v.w + xdiff;
                        if (newW > p.defwidth) {
                            this.gDiv.style.width = newW + 'px';
                            p.width = newW;
                        }
                    }                    var newH = v.h + diff;
                    if ((newH > p.minheight || p.height < p.minheight) && !v.hgo) {
                        this.bDiv.style.height = newH + 'px';
                        p.height = newH;
                        this.fixHeight(newH);
                    }
                    v = null;
                }
                else if (this.colCopy) {
                    $(this.dcol).addClass('thMove').removeClass('thOver');
                    if (e.pageX > this.hset.right || e.pageX < this.hset.left || e.pageY > this.hset.bottom || e.pageY < this.hset.top) {
                        //this.dragEnd();
                        $('body').css('cursor', 'move');
                    }
                    else
                        $('body').css('cursor', 'pointer');
                    $(this.colCopy).css({ top: e.pageY + 10, left: e.pageX + 20, display: 'block' });
                }            },
            dragEnd: function() {                if (this.colresize) {
                    var n = this.colresize.n;
                    var nw = this.colresize.nw;                    $('th:visible div:eq(' + n + ')', this.hDiv).css('width', nw);
                    $('tr', this.bDiv).each(
function() {
    $('td:visible div:eq(' + n + ')', this).css('width', nw);
}
);
                    this.hDiv.scrollLeft = this.bDiv.scrollLeft;
                    $('div:eq(' + n + ')', this.cDrag).siblings().show();
                    $('.dragging', this.cDrag).removeClass('dragging');
                    this.rePosDrag();
                    this.fixHeight();
                    this.colresize = false;
                }
                else if (this.vresize) {
                    this.vresize = false;
                }
                else if (this.colCopy) {
                    $(this.colCopy).remove();
                    if (this.dcolt != null) {
                        if (this.dcoln > this.dcolt)                            $('th:eq(' + this.dcolt + ')', this.hDiv).before(this.dcol);
                        else
                            $('th:eq(' + this.dcolt + ')', this.hDiv).after(this.dcol);                        this.switchCol(this.dcoln, this.dcolt);
                        $(this.cdropleft).remove();
                        $(this.cdropright).remove();
                        this.rePosDrag();
                    }                    this.dcol = null;
                    this.hset = null;
                    this.dcoln = null;
                    this.dcolt = null;
                    this.colCopy = null;                    $('.thMove', this.hDiv).removeClass('thMove');
                    $(this.cDrag).show();
                }
                $('body').css('cursor', 'default');
                $('body').noSelect(false);
            },
            toggleCol: function(cid, visible) {                var ncol = $("th[axis='col" + cid + "']", this.hDiv)[0];
                var n = $('thead th', g.hDiv).index(ncol);
                var cb = $('input[value=' + cid + ']', g.nDiv)[0];
                if (visible == null) {
                    visible = ncol.hide;
                }                if ($('input:checked', g.nDiv).length < p.minColToggle && !visible) return false;                if (visible) {
                    ncol.hide = false;
                    $(ncol).show();
                    cb.checked = true;
                }
                else {
                    ncol.hide = true;
                    $(ncol).hide();
                    cb.checked = false;
                }                $('tbody tr', t).each
(
function() {
    if (visible)
        $('td:eq(' + n + ')', this).show();
    else
        $('td:eq(' + n + ')', this).hide();
}
);                this.rePosDrag();                if (p.onToggleCol) p.onToggleCol(cid, visible);                return visible;
            },

Answer 3

switchCol: function(cdrag, cdrop) { //switch columns                $('tbody tr', t).each
(
function() {
    if (cdrag > cdrop)
        $('td:eq(' + cdrop + ')', this).before($('td:eq(' + cdrag + ')', this));
    else
        $('td:eq(' + cdrop + ')', this).after($('td:eq(' + cdrag + ')', this));
}
);                //switch order in nDiv
                if (cdrag > cdrop)
                    $('tr:eq(' + cdrop + ')', this.nDiv).before($('tr:eq(' + cdrag + ')', this.nDiv));
                else
                    $('tr:eq(' + cdrop + ')', this.nDiv).after($('tr:eq(' + cdrag + ')', this.nDiv));                if ($.browser.msie && $.browser.version < 7.0) $('tr:eq(' + cdrop + ') input', this.nDiv)[0].checked = true;                this.hDiv.scrollLeft = this.bDiv.scrollLeft;
            },
            scroll: function() {
                this.hDiv.scrollLeft = this.bDiv.scrollLeft;
                this.rePosDrag();
            },
            addData: function(data) { //parse data                if (p.preProcess)
                    data = p.preProcess(data);                $('.pReload', this.pDiv).removeClass('loading');
                this.loading = false;                if (!data) {
                    $('.pPageStat', this.pDiv).html(p.errormsg);
                    return false;
                }                if (p.dataType == 'xml')
                    p.total = +$('rows total', data).text();
                else
                    p.total = data.total;                if (p.total == 0) {
                    $('tr, a, td, div', t).unbind();
                    $(t).empty();
                    p.pages = 1;
                    p.page = 1;
                    this.buildpager();
                    $('.pPageStat', this.pDiv).html(p.nomsg);
                    return false;
                }                p.pages = Math.ceil(p.total / p.rp);                if (p.dataType == 'xml')
                    p.page = +$('rows page', data).text();
                else
                    p.page = data.page;                this.buildpager();                //build new body
                var tbody = document.createElement('tbody');                if (p.dataType == 'json') {
                    $.each
(
 data.rows,
 function(i, row) {
     var tr = document.createElement('tr');
     if (i % 2 && p.striped) tr.className = 'erow';      if (row.id) tr.id = 'row' + row.id;      //如果addcheck为true,自动增加选择列
     if (p.addcheck == true) {
         var chktd = document.createElement('td');
         var chkd = document.createElement('input');
         chkd.type = 'checkbox';
         chkd.className = 'chkd';
         chkd.value = row.id;
         //chkd.onclick="alert(this.value)";
         chktd.appendChild(chkd);
         //alert($(chktd).outerHTML());
         $(tr).append(chktd);
         //alert(tr);
     }
     //add cell
     $('thead tr:first th', g.hDiv).each
(
  function(i, n) {
      var idx = $(this).attr('axis').substr(3);
      if (p.addcheck == true && idx > row.cell.length - 1) return true;
      var td = document.createElement('td');
      td.align = this.align;
      //alert(p.addcheck+"."+idx);
      td.innerHTML = row.cell[idx];
      $(tr).append(td);
      td = null;
  }
);
     if ($('thead', this.gDiv).length < 1) //handle if grid has no headers
     {
         for (idx = 0; idx < cell.length; idx++) {
             var td = document.createElement('td');
             td.innerHTML = row.cell[idx];
             $(tr).append(td);
             td = null;
         }
     }
     $(tbody).append(tr);
     tr = null;
 }
);                } else if (p.dataType == 'xml') {                    i = 1;                    $("rows row", data).each
(   function() {       i++;       var tr = document.createElement('tr');
      if (i % 2 && p.striped) tr.className = 'erow';       var nid = $(this).attr('id');
      if (nid) tr.id = 'row' + nid;       nid = null;       var robj = this;       $('thead tr:first th', g.hDiv).each
(
  function() {       var td = document.createElement('td');
      var idx = $(this).attr('axis').substr(3);
      td.align = this.align;
      td.innerHTML = $("cell:eq(" + idx + ")", robj).text();
      $(tr).append(td);
      td = null;
  }
);
      if ($('thead', this.gDiv).length < 1) //handle if grid has no headers
      {
          $('cell', this).each
(
  function() {
      var td = document.createElement('td');
      td.innerHTML = $(this).text();
      $(tr).append(td);
      td = null;
  }
);
      }       $(tbody).append(tr);
      tr = null;
      robj = null;
  }
);
                    //$(".chkd").click(function(){alert('修改这个函数以全选/全不选');});
                }                $('tr', t).unbind();
                $(t).empty();                $(t).append(tbody);
                this.addCellProp();
                this.addRowProp();                //this.fixHeight($(this.bDiv).height());                this.rePosDrag();                tbody = null; data = null; i = null;                if (p.onSuccess) p.onSuccess();
                if (p.hideOnSubmit) $(g.block).remove(); //$(t).show();                this.hDiv.scrollLeft = this.bDiv.scrollLeft;
                if ($.browser.opera) $(t).css('visibility', 'visible');            },

Answer 4

楼主，知道怎么设置外部查询条件不？
http://topic.csdn.net/u/20111214/13/c66da74d-21d6-48e3-97f3-4ccefed77b37.html?60544
看这个帖。求救....