博客园_快乐家++ (Alan)

把逗号分隔的字符串拆成临时表

2012-03-26T04:00:00Z

/*
把逗号分隔的字符串拆成临时表
*/
ALTER function fn_SplitToTable(@str nvarchar(4000),@split varchar(10))
returns @t Table (c1 varchar(100))
as
begin
    declare @i int
    declare @s int
    set @i=1
    set @s=1
    while(@i>0)
    begin
        set @i=charindex(@split,@str,@s)
        if(@i>0)
        begin
            insert @t(c1) values(substring(@str,@s,@i-@s))
        end
        else begin
            insert @t(c1) values(substring(@str,@s,len(@str)-@s+1))
        end
        set @s = @i + 1
    end
    return
end

本文链接

jQuery 插件表格高亮显示选中行全选、反选（四种模式）

2012-02-28T12:31:00Z

<title>jquery表格修饰：隔行换色,点击变色,多选单选变色</title>
<script language=javascript src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style>
.dataTable { border-top: 1px solid #009286; border-right: 1px solid #009286; border-bottom: 1px solid #009286;}
.dataTable thead tr{background:url(../images/topBar_bg.gif); font-weight:bold; text-align:center;}
.dataTable tbody tr td{text-align:left; margin:0px; padding:8px; white-space:nowrap;}
.dataTable .null{margin:0px; padding:0px;}
.dataTable tbody tr{line-height: 120%;}
.dataTable .even{ background:#E1F4EE;}     /* 偶数行样式 E1F4EE*/
.dataTable .odd{ background:#E1F4EE;}      /* 奇数行样式 E1F4EE*/
.dataTable .over{background:#CCCC99;}      /* 鼠标掠过行样式 CCCC99*/
.dataTable .selected{ background:#6F4DFF;color:#ffffff;} /* 选中行样式 BFDFFF*/
</style>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<h1>Demo1--隔行,滑动,点击变色.</h1>
<table class="dataTable">
<thead>
<tr>
<th><input type="checkbox" name="tablechoice1" value=""/>全选</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>

<h1>Demo2--隔行,滑动,点击变色.+ 多选框选中的行变色.</h1>
<table class="dataTable">
<thead>
<tr>
<th><input type="checkbox" name="tablechoice1" value=""/><input type="checkbox" name="tablechoice1" value=""/>全选</th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
   <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
   <td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
    <td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
   <td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>


<h1>Demo3--隔行,滑动,点击变色.+ 单选框选中的行变色.</h1>
<table class="dataTable">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
   <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
   <td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
    <td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
   <td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>

本文链接

jQuery实现点击复选框即高亮显示选中行全选、反选

2012-02-25T11:27:00Z

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery实现点击复选框即高亮显示选中行全选、反选</title>
<style type="text/css">
table{ border:0;border-collapse:collapse;}
td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even{ background:#FFF38F;}  /* 偶数行样式*/
.odd{ background:#FFFFEE;}  /* 奇数行样式*/
.selected{ background:#FF6500;color:#fff;}
</style>
<script src="res/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//插件编写
(function ($) {
     $.fn.extend({
         "alterBgColor": function (options) {
             //设置默认值
             options = $.extend({
                 odd: "odd", /* 偶数行样式*/
                 even: "even", /* 奇数行样式*/
                 selected: "selected" /* 选中行样式*/
             }, options);
             $("tbody>tr:odd", this).addClass(options.odd);
             $("tbody>tr:even", this).addClass(options.even);
             $('tbody>tr', this).click(function () {
                 //判断当前是否选中
                 var hasSelected = $(this).hasClass(options.selected);
                 //如果选中，则移出selected类，否则就加上selected类
                 $(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
                 //查找内部的checkbox,设置对应的属性。
      .find(':checkbox').attr('checked', !hasSelected);
             });

             //表头中的checkbox （全选反选）
             $("thead>tr th:first :checkbox:first ").click(function () {
                 //判断当前是否选中
                 var hasSelected = $(this).attr("checked");
                 //如果选中，则移出selected类，否则就加上selected类
                 $('tbody>tr')[!hasSelected ? "removeClass" : "addClass"](options.selected);
                 if (hasSelected)
                     $('tbody>tr :checkbox').attr("checked",true);
                 else
                    $('tbody>tr :checkbox').attr("checked",false);
             });
             // 如果单选框默认情况下是选择的，则高色.
             $('tbody>tr:has(:checked)', this).addClass(options.selected);
             return this;  //返回this，使方法可链。
         }
     });
})(jQuery);

//插件应用
$(function(){
  $("#table2")
    .alterBgColor()  //应用插件
    .find("th").css("color","red");//可以链式操作
});

</script>
</head>
<body>
<table id="table2">
<thead><tr><th><input type="checkbox"/><input type="checkbox" onselect="javascript:alert('kdkdkd');"/></th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
<tbody>
  <tr>
   <td><input type="checkbox" name="choice" value=""/></td>
   <td>张三</td>
   <td>男</td>
   <td>浙江宁波</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="choice" value="" /></td>
    <td>李四</td>
   <td>女</td>
   <td>浙江杭州</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
     <td>王五</td>
   <td>男</td>
   <td>湖南长沙</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="choice" value="" /></td>
   <td>赵六</td>
   <td>男</td>
   <td>浙江温州</td>
  </tr>
  <tr>
  <td><input type="checkbox" name="choice" value="" /></td>
    <td>Rain</td>
   <td>男</td>
   <td>浙江杭州</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
   <td>MAXMAN</td>
   <td>女</td>
   <td>浙江杭州</td>
  </tr>
</tbody>
</table>
</body>
</html>

本文链接

Repeater 制作点击表头排序实例

2012-02-25T08:01:00Z

前台：

<table class="li1" cellspacing="1" cellpadding="2" border="0" style="width: 100%;" id="sort" oncontextmenu="return false; " onpaste=" return false;">
        <thead>
            <tr>
                <td style="width: 3%; padding-left: 0px;" align="left"><input id="selectall" onclick="SelectAll(selectall)" type="checkbox" name="selectall" /></td>
                <td align="left" style="width: 15%;"><asp:LinkButton ID="LinkButton1" runat="server" CommandName="username" OnClick="field_sort_Click">用户名</asp:LinkButton></td>
                <td style="width: 10%;"><asp:LinkButton ID="LinkButton2" runat="server" CommandName="logTime" OnClick="field_sort_Click">登录时间</asp:LinkButton></td>
                <td style="width: 10%;"><asp:LinkButton ID="LinkButton3" runat="server" CommandName="exitTime" OnClick="field_sort_Click">退出时间</asp:LinkButton></td>
                <td style="width: 9%;"><asp:LinkButton ID="LinkButton4" runat="server" CommandName="useredTime" OnClick="field_sort_Click">使用时间</asp:LinkButton></td>
                 <td style="width: 15%;"><asp:LinkButton ID="LinkButton5" runat="server" CommandName="opename" OnClick="field_sort_Click">操作日志</asp:LinkButton></td>
               <td style="width: 9%;" align="center">操作</td>
            </tr>
        </thead>
        <tbody>
            <asp:Repeater ID="rpt_loginLog" runat="server"
                onitemcommand="rpt_loginLog_ItemCommand" EnableViewState="False" onitemdatabound="rpt_loginLog_ItemDataBound"
                >
                <ItemTemplate>
                    <tr onmouseover=" this.className='on' " onmouseout="this.className='off'" style="cursor: hand">
                        <td style="padding-left: 0px;" align="left"><input onclick="SelectOne(this)" type="checkbox" name="sel_one" value='<%#DataBinder.Eval(Container.DataItem,"id")%>'></td>
                        <td align="left" title='<%#Eval("username")%>'> <%#Eval("username").ToString().Length > 8 ? Eval("username").ToString().Substring(0, 8) + "..." : Eval("username").ToString()%></td>
                        <td><%#Eval("logTime")%></td>
                        <td><%#Eval("exitTime").ToString() == "" ? "正在使用系统" : Eval("exitTime").ToString()%></td>
                        <td><%#Eval("useredTime")%>分钟</td>
                       <td>
                         <asp:Repeater runat="server" ID="rtp_operdetail">
                         <HeaderTemplate>
                           <table>
                            <tr>
                                 <td>
                                   操作模块
                                 </td>
                                 <td>
                                  操作类别
                                 </td>
                                 <td>
                                  次数
                                 </td>
                            </tr>


                         </HeaderTemplate>
                         <ItemTemplate>
                          <tr>
                             <td><%#Eval("plateid")%></td>
                        <td><%#Eval("operateType")%></td>
                        <td><%#Eval("time")%></td>
                          </tr>
                         </ItemTemplate>
                         <FooterTemplate>
                         </table>
                         </FooterTemplate>
                         </asp:Repeater>
                       </td>

                        <td>
                         <a href="javascript:deleteOne('<%#Eval("id") %>')" ><font color="blue">删除 </font></a>
                        <%--<asp:LinkButton ID="btn_del" CommandName="del" runat="server" CommandArgument='<%#Eval("id") %>' OnClientClick="return confirm('确定要删除此客户吗？')"><font color="blue">删除<%#Eval("id") %></font></asp:LinkButto--%></td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>

后台：

    protected void field_sort_Click(object sender, EventArgs e)
    {
        LinkButton lbt = sender as LinkButton;

        if (hdSort.Value.Trim() == "0")
        {
            hdSort.Value = "1";
             BindData("", lbt.CommandName.ToString()+" DESC");
        }
        else
        {
            BindData("", lbt.CommandName.ToString() + " ASC");
            hdSort.Value = "0";
        }



    }
    protected void AspNetPager2_PageChanged(object sender, EventArgs e)
    {
        BindData("","logTime desc");
    }
    protected void rpt_loginLog_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        if (e.CommandName == "del")
        {
            string id = e.CommandArgument.ToString();
            erp_crm.BLL.crm_loginLog loginLog = new crm_loginLog();
            loginLog.Delete(id);
            BindData("", "logTime desc");
        }
    }
    protected void rpt_loginLog_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        string id=DataBinder.Eval(e.Item.DataItem,"id").ToString();
        string sql=string.Format("select plateid,operateType,sum(1) 'time' from dbo.crm_OperationLog where loginid='{0}' group by plateid,operateType",id);
        Repeater rpt = (Repeater)e.Item.FindControl("rtp_operdetail");
        rpt.DataSource=DbHelperSQL.Query(sql).Tables[0];
        rpt.DataBind();

    }

本文链接

C# 写的排列组合类

2011-11-05T00:38:00Z

//-----------------------------------------------------------------------------
//
// 算法：排列组合类
//
//
// 调用方法如下：
//
// 1.GetPermutation(T[], startIndex, endIndex)
// 对startIndex到endIndex进行排列，其余元素不变
//
// 2.GetPermutation(T[])
// 返回数组所有元素的全排列
//
// 3.GetPermutation(T[], n)
// 返回数组中n个元素的排列
//
// 4.GetCombination(T[], n)
// 返回数组中n个元素的组合
//
// 版本历史：
// V0.1 2010-01-20
//
//-----------------------------------------------------------------------------

using System;
using System.Collections.Generic;

namespace Algorithms
{
    public class PermutationAndCombination<T>
    {
        /// <summary>
        /// 交换两个变量
        /// </summary>
        /// <param name="a">变量1</param>
        /// <param name="b">变量2</param>
        public static void Swap(ref T a, ref T b)
        {
            T temp = a;
            a = b;
            b = temp;
        }

        /// <summary>
        /// 递归算法求数组的组合(私有成员)
        /// </summary>
        /// <param name="list">返回的范型</param>
        /// <param name="t">所求数组</param>
        /// <param name="n">辅助变量</param>
        /// <param name="m">辅助变量</param>
        /// <param name="b">辅助数组</param>
        /// <param name="M">辅助变量M</param>
        private static void GetCombination(ref List<T[]> list, T[] t, int n, int m, int[] b, int M)
        {
            for (int i = n; i >= m; i--)
            {
                b[m - 1] = i - 1;
                if (m > 1)
                {
                    GetCombination(ref list, t, i - 1, m - 1, b, M);
                }
                else
                {
                    if (list == null)
                    {
                        list = new List<T[]>();
                    }
                    T[] temp = new T[M];
                    for (int j = 0; j < b.Length; j++)
                    {
                        temp[j] = t[b[j]];
                    }
                    list.Add(temp);
                }
            }
        }

        /// <summary>
        /// 递归算法求排列(私有成员)
        /// </summary>
        /// <param name="list">返回的列表</param>
        /// <param name="t">所求数组</param>
        /// <param name="startIndex">起始标号</param>
        /// <param name="endIndex">结束标号</param>
        private static void GetPermutation(ref List<T[]> list, T[] t, int startIndex, int endIndex)
        {
            if (startIndex == endIndex)
            {
                if (list == null)
                {
                    list = new List<T[]>();
                }
                T[] temp = new T[t.Length];
                t.CopyTo(temp, 0);
                list.Add(temp);
            }
            else
            {
                for (int i = startIndex; i <= endIndex; i++)
                {
                    Swap(ref t[startIndex], ref t[i]);
                    GetPermutation(ref list, t, startIndex + 1, endIndex);
                    Swap(ref t[startIndex], ref t[i]);
                }
            }
        }

        /// <summary>
        /// 求从起始标号到结束标号的排列，其余元素不变
        /// </summary>
        /// <param name="t">所求数组</param>
        /// <param name="startIndex">起始标号</param>
        /// <param name="endIndex">结束标号</param>
        /// <returns>从起始标号到结束标号排列的范型</returns>
        public static List<T[]> GetPermutation(T[] t, int startIndex, int endIndex)
        {
            if (startIndex < 0 || endIndex > t.Length - 1)
            {
                return null;
            }
            List<T[]> list = new List<T[]>();
            GetPermutation(ref list, t, startIndex, endIndex);
            return list;
        }

        /// <summary>
        /// 返回数组所有元素的全排列
        /// </summary>
        /// <param name="t">所求数组</param>
        /// <returns>全排列的范型</returns>
        public static List<T[]> GetPermutation(T[] t)
        {
            return GetPermutation(t, 0, t.Length - 1);
        }

        /// <summary>
        /// 求数组中n个元素的排列
        /// </summary>
        /// <param name="t">所求数组</param>
        /// <param name="n">元素个数</param>
        /// <returns>数组中n个元素的排列</returns>
        public static List<T[]> GetPermutation(T[] t, int n)
        {
            if (n > t.Length)
            {
                return null;
            }
            List<T[]> list = new List<T[]>();
            List<T[]> c = GetCombination(t, n);
            for (int i = 0; i < c.Count; i++)
            {
                List<T[]> l = new List<T[]>();
                GetPermutation(ref l, c[i], 0, n - 1);
                list.AddRange(l);
            }
            return list;
        }

        /// <summary>
        /// 求数组中n个元素的组合
        /// </summary>
        /// <param name="t">所求数组</param>
        /// <param name="n">元素个数</param>
        /// <returns>数组中n个元素的组合的范型</returns>
        public static List<T[]> GetCombination(T[] t, int n)
        {
            if (t.Length < n)
            {
                return null;
            }
            int[] temp = new int[n];
            List<T[]> list = new List<T[]>();
            GetCombination(ref list, t, t.Length, n, temp, n);
            return list;
        }
    }
}

调用：

int[] arr = new int[6];
for (int i = 0; i < arr.Length; i++)
{
arr[i] = i + 1;
}
//求排列
List<int[]> lst_Permutation = Algorithms.PermutationAndCombination<int>.GetPermutation(arr, 3);
//求组合
List<int[]> lst_Combination = Algorithms.PermutationAndCombination<int>.GetCombination(arr, 3);

本文链接

CSS 固定table 表头和列

2011-11-04T04:48:00Z

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>固定表头和列</title>
    <style>
        .FixedTitleRow
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            z-index: 10;
            background-color: #E6ECF0;
        }

        .FixedTitleColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.scrollLeft);
        }

        .FixedDataColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            background-color: #E6ECF0;
        }
    </style>
</head>
<body>
   <div id="scrollDiv" style="width:100%; overflow: auto; cursor: default; display: inline;
        position: absolute; height: 200px;">
        <table id='accountTable'  cellpadding='0' cellspacing='0'
            style='table-layout: auto' bordercolor='lightgrey'>
            <tbody>
                <tr class="FixedTitleRow">
                    <td class="FixedTitleColumn">
                        ID0</td>
                    <td class="FixedTitleColumn">
                        CK0</td>
                    <td class="FixedTitleColumn">
                        Code0</td>
                    <td class="FixedTitleColumn">
                        Descirption0</td>
                    <td class="FixedTitleColumn">
                        TOL0</td>
                    <td>
                        XS0</td>
                    <td >
                        SS0</td>
                    <td>
                        MS0</td>
                    <td>
                        DS0</td>
                    <td>
                        BS0</td>
                    <td>
                        XL0</td>
                    <td>
                        ML0</td>
                    <td>
                        DL0</td>
                    <td>
                        EM0</td>
                    <td>
                         </td>
                    <td>
                         </td>
                    <td>
                        BM0</td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td class="FixedDataColumn">
                        88</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                        22</td>
                    <td>
                         </td>
                    <td>
                         </td>
                    <td>
                        22</td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        1111</td>
                    <td class="FixedDataColumn">
                        This is Test</td>
                    <td class="FixedDataColumn">
                        1</td>
                    <td>
                        001</td>
                    <td>
                        002</td>
                    <td>
                        003</td>
                    <td>
                        004</td>
                    <td>
                        005</td>
                    <td>
                        006</td>
                    <td>
                        007</td>
                    <td>
                        008</td>
                    <td>
                        009</td>
                    <td>
                         </td>
                    <td>
                         </td>
                    <td>
                        010</td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        1111</td>
                    <td class="FixedDataColumn">
                        This is Test</td>
                    <td class="FixedDataColumn">
                        1</td>
                    <td>
                        001</td>
                    <td>
                        002</td>
                    <td>
                        003</td>
                    <td>
                        004</td>
                    <td>
                        005</td>
                    <td>
                        006</td>
                    <td>
                        007</td>
                    <td>
                        008</td>
                    <td>
                        009</td>
                    <td>
                         </td>
                    <td>
                         </td>
                    <td>
                        010</td>
                </tr>
                <tr>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        111</td>
                    <td class="FixedDataColumn">
                        1111</td>
                    <td class="FixedDataColumn">
                        This is Test</td>
                    <td class="FixedDataColumn">
                        1</td>
                    <td>
                        001</td>
                    <td>
                        002</td>
                    <td>
                        003</td>
                    <td>
                        004</td>
                    <td>
                        005</td>
                    <td>
                        006</td>
                    <td>
                        007</td>
                    <td>
                        008</td>
                    <td>
                        009</td>
                    <td>
                         </td>
                    <td>
                         </td>
                    <td>
                        010</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

ID0	CK0	Code0	Descirption0	TOL0	XS0	SS0	MS0	DS0	BS0	XL0	ML0	DL0	EM0	BM0
88	88	88	88	88	22	22	22	22	22	22	22	22	22	22
111	111	1111	This is Test	1	001	002	003	004	005	006	007	008	009	010
111	111	1111	This is Test	1	001	002	003	004	005	006	007	008	009	010
111	111	1111	This is Test	1	001	002	003	004	005	006	007	008	009	010

本文链接

jquery.flexigrid 使用

2011-10-31T12:27:00Z

<table id="flex1" style="display:none"></table>
            <input id="hidden" type="hidden" name="hidden" value="null" />
            <script>
            $("#flex1").flexigrid
            (
            {
            url: '../ReleaseInfoServlet?hidden=manage',
            dataType: 'json',
            colModel : [
                {display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center',hide: false},
                {display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'center'},
                {display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'center'},
                {display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'center'},
            
                {display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'center'},
                {display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'center'}
                ],
            buttons : [
                {name: '添加', bclass: 'add', onpress : button},
                {name: '删除', bclass: 'delete', onpress : button},
                {name: '修改', bclass: 'modify', onpress : button},
                {separator: true}
                ],
            searchitems : [
                {display: '信息编号', name : 'RINO', isdefault: true},
                {display: '信息标题', name : 'RITITLE'},
                {display: '信息类别', name : 'IC.ICNAME'},
                {display: '发布作者', name : 'RIAUTHOR'}
                ],
            sortname: "RINO",
            sortorder: "desc",
            usepager: true,
            title: '信息发布管理',
            useRp: true,
            rp: 20,
            showTableToggleBtn: true,
            width: 780,
            height: 300
            }
            );

            function button(com,grid)
            {
                if (com=='删除')
                    {
                        ${"hidden"}.value="delete";
                        if($('.trSelected',grid).length==0){
                            alert("请选择要删除的数据");
                        }else{
                            if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?'))
                            {
                              var  id ="";
                             for(var i=0;i<$('.trSelected',grid).length;i++){
                                if(i==$('.trSelected',grid).length-1){
                                    id += "id="+$('.trSelected',grid).find("td:first").eq(i).text();
                                } else {
                                    id += "id="+$('.trSelected',grid).find("td:first").eq(i).text()+"&";
                                }
                              }
                              window.location.href="../ReleaseInfoServlet?hidden="+${"hidden"}.value+"&"+id;
                          }
                       }
                    }
                else if (com=='添加')
                    {
                        ${"hidden"}.value="add";
                        window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value;
                    }
                else if (com=='修改')
                {
                    ${"hidden"}.value="modify";
                    if($(".trSelected").length==1){
                        window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();
                    }else if($(".trSelected").length>1){
                        alert("请选择一个修改,不能同时修改多个");
                    }else if($(".trSelected").length==0){
                        alert("请选择一个您要修改的新闻信息")
                    }
                }
            }

本文链接

Jquery插件flexigrid的参数说明

2011-10-31T11:27:00Z

1、flexigrid参数说明:
    height: 200, //flexigrid插件的高度，单位为px
    width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题
    striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
    novstripe: false,//没用过这个属性
    minwidth: 30, //列的最小宽度
    minheight: 80, //列的最小高度
    resizable: false, //resizable table是否可伸缩
    url: false, //ajax url,ajax方式对应的url地址
    method: 'POST', // data sending method,数据发送方式
    dataType: 'json', // type of data loaded,数据加载的类型，xml,json
    errormsg: '发生错误', //错误提升信息
    usepager: false, //是否分页
    nowrap: true, //是否不换行
    page: 1, //current page,默认当前页
    total: 1, //total pages,总页面数
    useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数
    rp: 25, // results per page,每页默认的结果数
    rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数
    title: false, //是否包含标题
    pagestat: '显示记录从{from}到{to}，总数 {total} 条', //显示当前页和总页面的样式
    procmsg: '正在处理数据，请稍候 ...', //正在处理的提示信息
    query: '', //搜索查询的条件
    qtype: '', //搜索查询的类别
    qop: "Eq", //搜索的操作符
    nomsg: '没有符合条件的记录存在', //无结果的提示信息
    minColToggle: 1, //允许显示的最小列数
    showToggleBtn: true, //是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错。
    hideOnSubmit: true, //是否在回调时显示遮盖
    showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮
    autoload: true, //自动加载，即第一次发起ajax请求
    blockOpacity: 0.5, //透明度设置
    onToggleCol: false, //当在行之间转换时，可在此方法中重写默认实现，基本无用
    onChangeSort: false, //当改变排序时，可在此方法中重写默认实现，自行实现客户端排序
    onSuccess: false, //成功后执行
    onSubmit: false, // 调用自定义的计算函数，基本没用
    //Style
    gridClass: "bbit-grid"//样式
}, p);
----------------------------------------------------------------------------------------------
2、支持ajax跨域：
    url中加callback=?
    后台获得callback函数的名字
    返回json数据格式为:print(callbackName+"("+jsonString+")");
----------------------------------------------------------------------------------------------
3、Flexigrid(HUGO.CM修改版v1.1)使用说明:
    1、加载flexigrid。p：选项参数集合
        $(“”).flexigrid(p);
    2、重新加载数据。
        $(“”).flexReload(p);
    3、更改flexigrid参数。P：选项参数集合
        $(“”).flexOptions (p);
    4、隐藏/显示列。cid：列索引，visible：bool
        $(“”).flexToggleCol (cid, visible);
    5、绑定数据。Data：数据源
        $(“”).flexAddData (data);
    6、no select plugin by me 。不知道做什么用的
        $(“”).noSelect (p);
    7、重新指定宽度和高度。
        $(“”).flexResize(w,h);
    8、翻页。type：first、prev、next、last、input
        $(“”).changePage(type);
----------------------------------------------------------------------------------------------
4、Flexigrid——colModel:
    属性名    类型    描述
    display    string    显示的列名
    name    string    绑定的列名
    sortable bool    是否可以排序
    align    string    对其方式
    width    int    列的宽度
    hide    bool    是否隐藏该列
    pk    bool    是否为主键标识、如果是则隐藏该列，值存入隐藏域中
    process    function
    customValue function    自定义显示值。(如性别：数据库为Bit类型，通过customValue方法返回“男/女”)参数：value,i
----------------------------------------------------------------------------------------------
5、Flexigrid——事件
    事件名        参数                    描述            返回值
    onDragCol    dcoln,dcolt                拖动列后触发         无
    onToggleCol    cid,visible                隐藏/显示列后触发    无
    onChangeSort    sortname,sortorder            自定义排序事件        无
    onChangePage    newp                    自定义翻页事件        无
    onSuccess    无                    数据获取成功时触发    无
    onError        XMLHttpRequest,textStatus,errorThrown   出现错误时触发        无
    onSubmit    无                    在获取数据前时触发    bool
    onRowSelect    this                    行选中事件        无
----------------------------------------------------------------------------------------------
6、Flexigrid——buttons
    属性名        类型        描述
    name        string        按钮名称
    bgclass        string        样式
    onpress        function    点击触发的方法
    separator    bool        分割线
----------------------------------------------------------------------------------------------
7、Flexigrid——searchitems
    属性名        类型        描述
    display        string        搜索类型下拉列表框：显示的列名
    name        string        搜索类型下拉列表框：绑定的列名
    isdefault    bool        是否为默认搜索类型
    //注：如果searchitems：true，则自动根据所有字段生成下拉列表框

本文链接

为Flexigrid添加获取整个数据集的方法

2011-10-31T11:22:00Z

Flexigrid是一款很漂亮的Jquery的表格插件，具体的信息大家可以上网上查一查。由于公司要用，所以研究了好半天这个东西，由于官方并没有提供给完整的文档，所以研究起来很痛苦~~~

公司要求做到客户端界面上的增删查改，所以第一步就是如何获取到Flexigrid的数据集，只有获取到了数据集，才能对数据集进行操作。琢磨了源码好久，终于琢磨出来怎么做了。

首先我们要改源码，打开从官网上下载的flexigrid.js文件，定位到615行（有可能会不同），有如下的代码：

$.ajax({
        type: p.method,
        url: p.url,
        data: param,
        dataType: p.dataType,
        success: function(data){
          g.addData(data);
        },
        error: function(data) { try { if (p.onError) p.onError(data); } catch (e) {} }
      });

将其改成：

$.ajax({
        type: p.method,
        url: p.url,
        data: param,
        dataType: p.dataType,
        success: function(data){
          g.addData(data);
          //---Coldfox's code
          //use this you can get all data from grid
          p.data=data;
          //---Coldfox's code end
        },
        error: function(data) { try { if (p.onError) p.onError(data); } catch (e) {} }
      });

其实就添加了一句：p.data=data;

然后我们为这个插件添加一个新的方法。定位到文件的末尾，添加如下函数：

//Coldfox's code

$.fn.flexGetData = function() { // function to get data from grid
  var griddata = {total:1,page:1,rows:[]};
  this.each( function() {
   if (this.grid)
    griddata = this.p.data;
  });
  return griddata;

};

这样，我们在html页面中就可以获取到数据集了，只要调用新添加的方法即可。

本文链接

jquery flexigrid 增加行双击事件

2011-10-31T11:21:00Z

在FlexiGrid.js的
=============================================
addRowProp: function()
   {
     $('tbody tr',g.bDiv).each
     (
       function ()
       {
       $(this)
==============================================
后面增加
===============================================

.dblclick(
    function (e) {
        var rowData = new Object();
         $.each($(this).find('div'),function(i){
             $(rowData).data(p.colModel[i].name,$(this).text());
         });
        if (p.onRowDblclick) p.onRowDblclick($(rowData));
     }
)

===============================================
在页面flexigrid（{}）中增加
=================
onRowDblclick:rowdbclick//rowdbclick自定义函数
===================
以下为rowdbclick,弹出ID列的值
================
var rowdbclick = function(rowData) { alert($(rowData).data("ID").toString()); }
===============

本文链接

博客园_快乐家++ (Alan)

把逗号分隔的字符串拆成临时表

jQuery 插件 表格高亮显示选中行 全选、反选（四种模式）

jQuery实现点击复选框即高亮显示选中行 全选、反选

Repeater 制作点击表头排序实例

C# 写的 排列组合类

CSS 固定table 表头和列

jquery.flexigrid 使用

Jquery插件flexigrid的参数说明

为Flexigrid添加获取整个数据集的方法

jquery flexigrid 增加行双击事件

jQuery 插件表格高亮显示选中行全选、反选（四种模式）

jQuery实现点击复选框即高亮显示选中行全选、反选

C# 写的排列组合类