/*
 插件名称：jGridViewBar
 主要功能：对生成的GridView进行客户端加工，对指定的列进行分组并归类显示，更多新功能还在开发中
 当前版本号：2.3.0.0
 发布日期：2007/9/23
         
最新官方信息发布：http://www.senparc.com/WebTools.xhtml/JGridViewBar

         作者：TNT2   QQ：498977166（加位好友请说明来意）   Email:szw2003@163.com    www.senparc.com

版权及相关说明：
1、作者对此插件保留所有权利。本插件本着开源、交流、共同进步的宗旨，以免费形式为大家无偿提供。修改、引用请保留以上说明信息，否则将视同为主动盗用本插件。
2、为保证本插件的完整性、安全性和版本统一性，解决任何单位和个人将此插件代码修改后以个人名义或“jGridViewBar”及类似名称发布，一旦发现，作者将不遗余进行力地进行追查、打击、曝光
3、作者对此插件保留最终解释权。


如有任何问题或意见、建议，欢迎与作者取得联系！让我们共同进步！
======================================================================================================================

    参数含义：

       调用格式： rebulidRowBar(tableCSS , attr , multiView) ，参数设置定义如下：
        
        tableCSS：Table的CSS样式（即GridView的CssClass），字符串型 
        
        attr：分组常规参数设置，Hash型，其中包含了以下参数：
            headShowed：是否显示了GridView的Head ，布尔型
            footShowed：是否显示了GridView的Foot ，布尔型
            checkColum：需要归类的列（从0开始计） ，整数型
            hideCheckColum：是否需要隐藏归类列，布尔型
            barBgcolor：归总栏目的背景色 ，字符串型，可以使用十六进制“#6699ff”格式，或者“red”,“blue”等英文表示
            hideGroup：是否可受起（隐藏）栏目，布尔型
        
        
        multiView： MultiView（分页）效果参数设置，Hash型，其中包含了以下参数：
           showMultiView： 是否分栏显示（类似ASP.NET2.0的MultiView效果），布尔型
           multiViewOutWidth： 采用分页效果后，表格的总宽度（出于美观考虑，提供此参数），字符串型。可设定像素（整数）或百分比数等，所有width属性支持的参数，字符串型
           showDiyMultiViewTip： 是否使用自定义标签（仅当此参数为true时，以下diyTipAttr参数才会生效）  ，布尔型
           diyTipAttr： 自定义标签的链接类型，包活了标题文字、链接URL和打开链接的窗口三项参数，这三个参数共同组成一个一维数组，由如此若干个一个维数组组成diyTipAttr二维数组，以,分隔 ，二维数组
               |
            diyTipAttr参数设定格式：
            diyTipAttr 中包含了任意个固定格式的一维数组，每一个一维数组分别对应一个自定义标签，格式为：[标签标题 , 链接URL ,打开窗口]
            
======================================================================================================================
*/


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

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

//multiView参数 开始
var outTableCSS = "jGridViewBar_OutTable_";
var outMultiViewCSS= "jGridViewBar_OutMultiView_";
var MultiViewTipCSS= "jGridViewBar_MultiViewTip_";
var MultiViewTipID_Auto= "jGridViewBar_MultiViewTipAuto_";
//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 ,multiView){
    var columHTML = "";//目标单元格内容
    var tdTotalInRow = 0 ;//列总数
    var trTotal = $("table."+tableCSS+" tr").size();//总行数
    var trNum = 0;//行计数
    var autoBarNum = 0 ;//自动生成栏目数

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

    //hash参数设定 开始
    
    //attr 参数
    var headShowed = attr['headShowed'];
    var footShowed = attr['footShowed'];
    var checkColum = parseInt(attr['checkColum']);
    var hideCheckColum = attr['hideCheckColum'];
    var barBgcolor = attr['barBgcolor'];
    var hideGroup = attr['hideGroup'];
    
    //multiView　参数
    var showMultiView = multiView['showMultiView'];
    var multiViewOutWidth = multiView['multiViewOutWidth'];
    var showDiyMultiViewTip = multiView['showDiyMultiViewTip'];
    var diyTipAttr =  multiView['diyTipAttr'];
    
//    var mvTipText = multiView['mvTipText'];
//    var mvTipUrl = multiView['mvTipUrl'];
//    var mvTipBlank = multiView['mvTipBlank'];
    //hash参数设定 结束
    
    
    //multiView参数 开始
    outTableCSS += tableCSS ;
    outMultiViewCSS += tableCSS;
    MultiViewTipCSS +=  tableCSS;
    MultiViewTipID_Auto += 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判断 开始
    
    //判断multiView结构是需要构建
    if(showMultiView || showDiyMultiViewTip)
    {
        //构建MulitView栏结构
        buildMultiView(tableCSS , multiViewOutWidth);
    }
    
    //自动Tip标签
    if(showMultiView)
    {
        //添加MulitView栏
        autoBarNum = 0; //还原状态——第一行
        addMultiViewTip(tableCSS , autoBarNum , "全部" , headShowed , ""); //“全部信息”栏
        
        //遍历添加所有动态MulitView栏
        $("table."+tableCSS+" tr."+barHTMLCSS).each(function(){
            autoBarNum++;
            var multiViewTipTitle = $(this).find("b").html();//包含在<b>标签内的即标题
            
            addMultiViewTip(tableCSS , autoBarNum , multiViewTipTitle , headShowed , ""); 

        });
    }

    if(showDiyMultiViewTip)
    {
        //便利每一个标签
        autoBarNum = -1 ;//-1表示为自定义标签
        for(var i=0;i<diyTipAttr.length;i++){

            addMultiViewTip(tableCSS , autoBarNum , "" , headShowed , diyTipAttr[i]); 
//            alert("text:" + diyTipAttr[i][0] + ",url:" + diyTipAttr[i][1] + ",blank:" + diyTipAttr[i][2]);
        }

    }
    
    //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 , diyMultiViewAttr)
{
    //MultiView的标签样式
    var MultiViewTipStyle="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 theMultiViewTipCSS = MultiViewTipCSS; //MultiView自动生成标签唯一的统一命名
    var theOneMultiViewTipID = MultiViewTipID_Auto + autoBarNum; //MultiView标签唯一的ID
    var MultiViewPositionCSS = "jGridViewBar_MultiView_PositionDIV_" + tableCSS + "_" +autoBarNum;//MultiView页站位Div的CSS标签
    var MultiViewOnClick = "showMultiViewPage( '" + tableCSS + "' , '" + autoBarNum + "' , '" + multiViewTipTitle + "' , '" + headShowed + "' , '" + theOneMultiViewTipID + "' , '" + theMultiViewTipCSS + "' );" + 
                           "";//$(this).addclass(\"MultiViewTipSelected\");

    //判断是否为自定义标签
    if( autoBarNum == -1 && diyMultiViewAttr.length > 0 )
    {
        multiViewTipTitle = diyMultiViewAttr[0];//Tip标签文字
        MultiViewTipStyle += "background-color :#eaf5f7 ;";//Tip背景色
        theMultiViewTipCSS += "diy";//于其他自动生成的标签CSS相区分，用于不用样式处理
        
        var diyMultiViewUrl = diyMultiViewAttr[1];
        var diyMultiViewBlank = diyMultiViewAttr[2];
        MultiViewOnClick = "window.open('" + diyMultiViewUrl + "', '" + diyMultiViewBlank + "')";
    }
    else
    {
        MultiViewTipStyle += "background-color :#ffffff ;";
    }
    
    $("div." + outMultiViewCSS ).append("<div class=\"" + theMultiViewTipCSS + "\" style=\"" + MultiViewTipStyle + "\" onclick=\"" + MultiViewOnClick + "\" id=\"" + theOneMultiViewTipID + "\" nowrap=\"nowrap\" >" + multiViewTipTitle + "</div>");//MultiView标签
    if(autoBarNum==0)
    {
        //初始化状态下，"全部"标签默认为选中
        $("div." + theMultiViewTipCSS ).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 showMultiViewPage( tableCSS , autoBarNum , multiViewTipTitle , headShowed , theOneMultiViewTipID , theMultiViewTipCSS )
{
    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."+theMultiViewTipCSS).css("background-color","#ffffff");//还原其余样式
    $("#"+theOneMultiViewTipID).css("background-color","#ffcc99");//添加样式
////     $("div."+theOneMultiViewTipCSS).addclass("MultiViewTipSelected");
    //被选中样式
    

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


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








/*
更新记录


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

发布日期：2007/9/23

更新记录:
增加了MulitView分页功能中的“自定义标签”功能，用户可以自己定义任意个自定义标签，用以打开其他窗口。

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

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中用户组的效果）

*/