/*
 插件名称：jGridViewBar
 主要功能：对生成的GridView进行客户端加工，对指定的列进行分组并归类显示，更多新功能还在开发中
 当前版本号：2.2.0.0
 发布日期：2007/9/19
 
         作者：TNT2   QQ：498977166   Email:szw2003@163.com    www.senparc.com
         
         
         
    参数含义：
        rebulidRowBar(tableCSS , attr) 的参数设置定义如下：
        tableCSS：Table的CSS样式（即GridView的CssClass），字符串型 
        attr：参数设置，Hash型，其中包含了以下参数：
        headShowed：是否显示了GridView的Head ，布尔型
        footShowed：是否显示了GridView的Foot ，布尔型
        checkColum：需要归类的列（从0开始计） ，整数型
        hideCheckColum：是否需要隐藏归类列，布尔型
        barBgcolor：归总栏目的背景色 ，字符串型，可以使用十六进制“#6699ff”格式，或者“red”,“blue”等英文表示
        hideGroup：是否可受起（隐藏）栏目，布尔型
        multiView：是否分栏显示（类似ASP.NET2.0的MultiView效果），布尔型
*/


/********************************/
/*         全局定义  开始       */
/********************************/

//Group栏目参数 开始
var barHTMLCSS = "jGridViewBar_GroupBar_";//Group标题栏CSS标签（全局统一）
//Group栏目参数 结束

//multiView参数 开始
var outTableCSS = "jGridViewBar_OutTable_";
var outMultiViewCSS= "jGridViewBar_OutMultiView_";
var MultiViewTipCSS= "jGridViewBar_MultiViewTip_";
//multiView参数 结束

//创建CSS样式
//var MultiViewTipStyle = "<style>"+
//                        ".MultiViewTipSelected {background-color: #ffcc99;}"+
//                        "</style>"
//document.writeln(MultiViewTipStyle);document.close();
//				var div = document.createElement("Tipdiv");
//				$(div).css(
//				{
//					border: "1px dashed #ccc",
//					padding: "5px",
//					backgroundColor: bgcolour,
//					position: "absolute"
//				})
//				
//				//以下2个属性在写在上面会出错,应该是-在这里会出错---TT.Net
//				.css("padding-left", "20px")
//				.css("padding-right","20px")


/********************************/
/*         全局定义  结束       */
/********************************/



function rebulidRowBar(tableCSS , attr){
    var columHTML = "";//目标单元格内容
    var tdTotalInRow = 0 ;//列总数
    var trTotal = $("table."+tableCSS+" tr").size();//总行数
    var trNum = 0;//行计数
    var autoBarNum = 0 ;//自动生成栏目数

    barHTMLCSS += tableCSS ;//Group标题栏CSS标签（全局统一）

    //hash参数设定 开始
    var headShowed = attr['headShowed'];
    var footShowed = attr['footShowed'];
    var checkColum = parseInt(attr['checkColum']);
    var hideCheckColum = attr['hideCheckColum'];
    var checkColumEdit = attr['checkColumEdit'];
    var barBgcolor = attr['barBgcolor'];
    var hideGroup = attr['hideGroup'];
    var multiView = attr['multiView'];
    var multiViewOutWidth = attr['multiViewOutWidth'];
    //hash参数设定 结束
    
    
    //multiView参数 开始
    outTableCSS += tableCSS ;
    outMultiViewCSS += tableCSS;
    MultiViewTipCSS +=  tableCSS;
    //multiView参数 结束

    
    //遍历每一行
    $("table."+tableCSS+" tr").each(function(){

        if( ( headShowed && trNum == 0) || (footShowed && trNum == trTotal -1) )
        {
              //head或foot
              
              if(hideCheckColum)//需要隐藏指定排序列
              {
                  var headORfoot="";
                  //确认标记
                  if(headShowed && trNum == 0)
                  {
                    headORfoot = "th";
                  }
                  else
                  {
                    headORfoot = "td";
                  }
                  
                  //执行隐藏
                  var fheadORfoot_TdCount = 0;
                   $(this).children(headORfoot).each(function(){
                       if(fheadORfoot_TdCount == checkColum)
                       {
                            $(this).hide();
                       }
                       fheadORfoot_TdCount++;
                   });
               }
        }
        else
        {
            if($(this).children("td").size() > tdTotalInRow)
            {
               tdTotalInRow = $(this).children("td").size();//一行内的单元格数
            }
            
            var tdNum = 0;//单元格计数      
            
            //遍历每一个单元格
            $(this).children("td").each(function(){
                if(tdNum == checkColum)
                {
                    var newColum = getCheckColumTitle($(this));//根据不同的控件样式,自动确定内容
                    
                    
                    if( columHTML != newColum)
                    {
                        columHTML = newColum;
                        autoBarNum++;
                        var barHTML= "";//Group标题栏HTML代码

                        var onclickHTML = "onclick=\"switchdivAutoBar('" + tableCSS + "','" + autoBarNum +"');\" ";//onclick事件
                        var styleHTML = (hideGroup) ? "style=\"cursor:hand;\" " : "" ;//style样式 | 判断是否隐藏组（显示手型鼠标）
                        barHTML += "<tr class=\"" + barHTMLCSS + "\" " + onclickHTML + styleHTML + " bgcolor=\"" + barBgcolor + "\"><td align=\"left\" colspan=" + tdTotalInRow + "> <b>" + columHTML + "</b> 组</td></tr>";
           
                        $(this).parent().before(barHTML);//添加自动生成的标题栏
                    }
                    
                        //隐藏单元格
                    if(hideCheckColum)//需要隐藏指定排序列单元格
                    {
                       $(this).hide();
                    }
                }
                tdNum++;//单元格计数
            });
            
            //添加CSS样式标记
            if(hideGroup)
            {
               $(this).addClass("groupAutoBar_" + tableCSS +  autoBarNum);
            }
        }
        
        trNum++;//行计数
    });
    
    //multiView判断 开始
    if(multiView)
    {
        //构建MulitView栏结构
        buildMultiView(tableCSS , multiViewOutWidth);
        //添加MulitView栏
        autoBarNum = 0; //还原状态——第一行
        addMultiViewTip(tableCSS , autoBarNum , "全部"); //“全部信息”栏
        
        //遍历添加所有动态MulitView栏
        $("table."+tableCSS+" tr."+barHTMLCSS).each(function(){
            autoBarNum++;
            var multiViewTipTitle = $(this).find("b").html();//包含在<b>标签内的即标题
            
            addMultiViewTip(tableCSS , autoBarNum , multiViewTipTitle , headShowed); 

        });
    }
    //multiView判断 结束
    
}


function getCheckColumTitle(caseTD)
{
    var newColum = "";
    var mode = ""; 

/*   mode定义：
    l：span
    t：TextBox
    m：多行TextBox
    d：DropdownList
    r：RadioButtom
*/


//    alert(caseTD.eq(0).html().toLowerCase().indexOf("<span") == 0);
    if(caseTD.eq(0).find("span").size() > 0)
    {
         mode = "l";//span（Label）
//           newColum = caseTD.find("span").eq(0).html();//如果第一个标签是<span>，那么只锁定第一个<span>中的值
    }
    else if(caseTD.eq(0).find("input:text").size() > 0)
    {
          mode = "t";//TextBox
    }
    else if(caseTD.eq(0).find("textarea").size() > 0)
    {
          mode = "m";//多行TextBox
    }
    else if(caseTD.eq(0).find("option").size() > 0)
    {
          mode = "d";//DropdownList
    }    
    else if(caseTD.eq(0).find("input:radio").size() > 0)
    {
          mode = "r";//RadioButtom
    }
    
     switch(mode)
    {
        case "":
        case "l"://Label标签
           newColum = caseTD.find("span").eq(0).html();//只锁定第一个<span>中的值
            break;
        case "t"://TextBox
          newColum = caseTD.find("input:text").eq(0).attr("value");
            break;
        case "m"://多行TextBox
          newColum = caseTD.find("textarea").eq(0).html();
            break;
        case "d"://DropdownList
              newColum = caseTD.find("select").find("option").eq(0).html();//默认第一个选中
              //遍历所有选项,看是否有项被确实选中
              caseTD.find("select").find("option").each(function(){
                if($(this).attr("selected"))
                {
                    newColum=$(this).html();
                }
               });
            break;
        case "r"://RadioButtom
             newColum = caseTD.find("input:radio").eq(0).attr("value");//默认第一个选中
             //遍历所有选项,看是否有项被确实选中
              caseTD.find("input:radio").each(function(){
                if($(this).attr("checked"))
                {
                    newColum=$(this).attr("value");
                }
               });
             
            break;
        default:
            break;
    }

    return newColum;
}


//开关/自动生成的标题栏
function switchdivAutoBar(tableCSS , autoBarNum)
{
    $(".groupAutoBar_" + tableCSS + autoBarNum).toggle();
}







/********************************/
/*     MultiView框架  开始      */
/********************************/

//创建MultiView框架
function buildMultiView(tableCSS , multiViewOutWidth)
{
    $("table." + tableCSS).wrap("<div class=\"" + outTableCSS + "\" style=\"text-align:center\"></div>");//Table(MultiView)最外套
    $("div." + outTableCSS).css("width",multiViewOutWidth);//最外层宽度
    $("table." + tableCSS).css("width","100%");//将表格撑满宽度
 
    $("div." + outTableCSS ).prepend("<div class=\"" + outMultiViewCSS + "\" style=\"display:block; text-align: left; padding-top: 4px;\"></div>");//MultiView最外套
}

//增加标签
function addMultiViewTip( tableCSS , autoBarNum , multiViewTipTitle , headShowed)
{
    //MultiView的标签样式
    var MultiViewTipStyle="background-color :#ffffff ;border-right: #000099 1px solid; padding-right: 6px; border-top: #000099 1px solid; display: inline; padding-left: 6px; border-bottom-width: 1px; border-bottom-color: #000099; border-left: #000099 1px solid; margin-left: 2px; margin-right: 2px; margin-top: 4px; margin-bottom: 4px;padding-top: 3px; cursor:hand;";
    var theOneMultiViewTipCSS = MultiViewTipCSS + autoBarNum; //MultiView标签唯一的CSS命名
    var MultiViewPositionCSS = "jGridViewBar_MultiView_PositionDIV_" + tableCSS + "_" +autoBarNum;//MultiView页站位Div的CSS标签
    var MultiViewOnClick = "showMultiView( '" + tableCSS + "' , '" + autoBarNum + "' , '" + multiViewTipTitle + "' , '" + headShowed + "' , '" + theOneMultiViewTipCSS + "' );" + 
                           "";//$(this).addclass(\"MultiViewTipSelected\");
    
    $("div." + outMultiViewCSS ).append("<div class=\"" + theOneMultiViewTipCSS + "\" style=\"" + MultiViewTipStyle + "\" onclick=\"" + MultiViewOnClick + "\" nowrap=\"nowrap\" >" + multiViewTipTitle + "</div>");//MultiView标签
    if(autoBarNum==0)
    {
        //初始化状态下，"全部"标签默认为选中
        $("div." + theOneMultiViewTipCSS ).css("background-color","#ffcc99");
    }

//    //生成MultiView页
//    if(autoBarNum!=0)
//    {
//        $("table."+tableCSS).after("<div class=\"" + MultiViewPositionCSS + "\">"+MultiViewPositionCSS+"</div>");//MultiView标签

//        var newTableCSS = tableCSS + "_" + autoBarNum;//新建Table的CSS标签
//        var groupCSS = "groupAutoBar_" + tableCSS +  autoBarNum ;//Group的统一CSS标签
//        
//        //构建新Table开始
//        var newTable = "<table class=\"" + newTableCSS + "\">";
//        //添加标题行
//       newTable += $("table."+tableCSS+" th").eq(0).parent().html();
//        
//        //遍历添加行
//        $("table."+tableCSS+" tr."+ groupCSS ).each(function(){
//            var newRow = $(this).html();//本行HTML代码

//    //        alert($(this).html());
//              newTable += "<tr>";
//              newTable += newRow;
//              newTable + "</tr>";
//        });
//        
//        newTable += "</table>";
//        //构建新Table结束
////        alert(newTable);


//         $("div."+MultiViewPositionCSS).append(newTable);//插入新Table
//         
//        
////        alert($("div."+MultiViewPositionCSS).html());
//    }

}


function showMultiView( tableCSS , autoBarNum , multiViewTipTitle , headShowed , theOneMultiViewTipCSS )
{
    if(autoBarNum==0)
    {
        //全部显示
        $("table."+tableCSS + " tr").show();
    }
    else
    {
        $("table."+tableCSS + " tr").hide();//所有行隐藏
        
        $("table."+tableCSS + " tr." + "groupAutoBar_" + tableCSS +  autoBarNum).show();//只显示指定CSS标签的行
 
        if(headShowed)
        {
             $("table."+tableCSS + " tr").eq(0).show();//如果显示了head，则加上head行
        }
    }
    
    //后期需要改为样式表<style>控制
    $("div." + outTableCSS +" div").css("background-color","#ffffff");//还原其余样式
    $("div."+theOneMultiViewTipCSS).css("background-color","#ffcc99");//添加样式
////     $("div."+theOneMultiViewTipCSS).addclass("MultiViewTipSelected");
    //被选中样式
    

//    alert($("tr.groupAutoBar_" + tableCSS +  autoBarNum).html());
}


/********************************/
/*     MultiView框架  结束      */
/********************************/








/*
更新记录

V2.2.0.0
完整版（开源，供研究探讨用）：jquery.gridviewbar-2.2.0.0.js 
压缩版（加密并压缩，小于1/4的体积，供网上实际使用）：jquery.gridviewbar-pack-2.2.0.0.js 

发布日期：2007/9/22

更新记录:
增强了“指定排序列”的兼容性，现在除了<span>标签环绕对象，还新增了文本框（单行/多行）、单选按钮、下拉菜单等，以适应不同环境的需要，特别是GridView的编辑状态。目前还不支持CheckBox。


------------------------



V2.1.0.0
完整版（开源，供研究探讨用）：jquery.gridviewbar-2.1.0.0.js 
压缩版（加密并压缩，小于1/4的体积，供网上实际使用）：jquery.gridviewbar-pack-2.1.0.0.js 

发布日期：2007/9/21

更新记录:
在分类的基础上，增加了ASP.NET2.0的MultiView（分页）的效果。有了这个功能，用户不必每次都回传到服务器，由服务器处理分类，一切操作都在客户端完成，高效省时！

-------------------------------



V2.0.0.0.
完整版（开源，供研究探讨用）：jquery.gridviewbar-1.2.0.0.js 
压缩版（加密并压缩，1/3的体积，供网上实际使用）：jquery.gridviewbar-pack-1.2.0.0.js 

发布日期：2007/9/20

更新记录:
为了适应更多参数的需要，把一些属性都归入了hash型的参数，这样扩展性就大大增强了
同时增加了一些功能：
·用户可自行设定是否隐藏指定排序列
·用户可自行设定归总栏目的背景色（陆续还会有前景色等设置项目推出）
·用户可自行设定是否可以收起（隐藏）栏目，像QQ用户组那样

-------------------------------


2007/9/19 V1.1.0.0
对“指定分类”列进行了隐藏，保证美观和一定的灵活性
修正了当Foot显示时,不能正常隐藏的bug


-------------------------------



2007/9/19 V1.0.0.0  
对ASP.NET 的 GridView 指定列进行分类，并可以单独“开/关”（有点像QQ中用户组的效果）

*/