效果：
核心代码：
自定义Jquery插件grid.js
//Jquery自定义分页插件 (function ($) { $.fn.grid = function (options) { var objGrid = $(this); var defaults = { action:"normalList", mouldId:"", pageIndex:1, pageSize:10, orderField:"" , orderType:"", searchField: "",//搜索条件 url:"" //ajax处理页地址 } var options = $.extend(defaults, options); function init(){ if($(".pagebar").size()>0){ $(".pagebar").remove(); } objGrid.html(""); $.ajax({ type:"get", contentType:"application/json;charset=utf-8", data:options, cache:false, url:options.url, success: function(result) { if(result.length<=0)return; //alert(result); var json = eval("("+result+")"); objGrid.html(json.data); if(json.total>0) objGrid.after(pagebar(parseInt(json.total))); psChange(); pgFirst(); pgNext(); pgPrev(); pgLast(); pgRefresh(); selChange(); order(); rowChecked(); collect(); //滚动条 var height=objGrid.find("table:first").height()+30; $(".container").css("height",height+"px"); $("#lblList").css("height",height+"px"); $(".container").hScrollPane({ mover:"#lblList", moverW: function(){return $("table.grid").width()+50}(), showArrow:true, handleCssAlter:"draghandlealter", mousewheel:{moveLength:200} }); //左右（上下）分栏式页面控制 var mheight=objGrid.find("table:first").height()+$("#mainFrame .column .topFrame").height()+80; var mfcheight=$(window).height()-174; $("#mainFrame .column").css("height",mheight+"px"); if(mheight>mfcheight){ $("#mainFrame .column").css("height",mheight+"px"); }else{ $("#mainFrame .column").css("height",mfcheight+"px"); } } }); }; /*分页HTML*/ function pagebar(total){ var pageCount = total%options.pageSize==0?total/options.pageSize:parseInt(total/options.pageSize)+1; pageCount=pageCount==0?1:pageCount; var selectObj = "<select style=\"50px;\">"; for(var pIndex=1;pIndex<=pageCount;pIndex++){ if(pIndex==options.pageIndex){ selectObj+='<option selected="selected">'+pIndex+'</option>'; }else{ selectObj+='<option>'+pIndex+'</option>'; } } selectObj += "</select>"; var pageHtml ='<div class="pagebar"><div class="pgPanel"><div>每页显示<a>10</a> <a>20</a> <a>30</a>条 </div>'; if(options.pageIndex==1) pageHtml+='<div class="separator"></div><div class="pgBtn pgFirstDisabled" title="首页"></div><div class="pgBtn pgPrevDisabled" title="上页"></div>'; else pageHtml+='<div class="separator"></div><div class="pgBtn pgFirst" title="首页"></div><div class="pgBtn pgPrev" title="上页"></div>'; pageHtml+='<div class="separator"></div><div>第 '+selectObj+' 页 / 共<span class="pgTotalPage" id="pageCount">'+pageCount+'</span> 页</div>'; if(options.pageIndex==pageCount) pageHtml+='<div class="separator"></div><div class="pgBtn pgNextDisabled" title="下页"></div><div class="pgBtn pgLastDisabled" title="尾页"></div>'; else pageHtml+='<div class="separator"></div><div class="pgBtn pgNext" title="下页"></div><div class="pgBtn pgLast" title="尾页"></div>'; pageHtml+='<div class="separator"></div><div class="pgBtn pgRefresh" title="刷新"></div><div class="separator"></div></div></div>'; return pageHtml; }; //初始化 init(); /*pagesize 每页显示条数*/ function psChange(){ $(".pgPanel a").click(function(){ options.pageIndex=1; options.pageSize = parseInt($(this).html()); init(); }); } /*下拉框页数改变事件*/ function selChange(){ $(".pagebar select").change(function(){ options.pageIndex = parseInt($(this).val()); init(); }); } /*首页*/ function pgFirst(){ $(".pagebar .pgFirst").click(function(){ options.pageIndex = 1; init(); }); } /*上页*/ function pgPrev(){ $(".pagebar .pgPrev").click(function(){ options.pageIndex--; init(); }); } /*下页*/ function pgNext(){ $(".pagebar .pgNext").click(function(){ options.pageIndex ++; init(); }); } /*尾页*/ function pgLast(){ $(".pagebar .pgLast").click(function(){ options.pageIndex = parseInt($(".pagebar select option").eq($(".pagebar select option").size()-1).html()); init(); }); } /*刷新*/ function pgRefresh(){ $(".pagebar .pgRefresh").click(function(){ init(); }); } /*字段排序*/ function order(){ objGrid.find("table:first thead th").click(function(){ if($(this).attr("field")){ options.pageIndex = 1; options.orderField = $(this).attr("field"); if($(this).attr("ordertype")=="desc"){ options.orderType = "asc"; $(this).attr("ordertype","asc"); }else{ options.orderType = "desc"; $(this).attr("ordertype","desc"); } init(); } }) } /*列表页checkbox选择 单击DataRow时，判断全选按钮是否选中*/ function rowChecked(){ objGrid.find("table tbody input[type='checkbox']").click(function(){ if($(this).attr("checked")){ var ckedCount = 0; objGrid.find("table tbody input[type='checkbox']").each(function(){ if($(this).attr("checked")){ ckedCount++; } }); var trCount = objGrid.find("table tbody tr").size()-1; if(trCount==ckedCount){ objGrid.find("table thead .checkall").attr("checked",true); } }else{ if(objGrid.find("table thead .checkall").attr("checked")){ objGrid.find("table thead .checkall").removeAttr("checked"); } } }); } /*收藏方法*/ function collect(){ var caption=""; var fid=""; //已收藏->未收藏 objGrid.find("table tbody span[class='img_collect']").click(function(){ caption=$(this).attr("caption"); fid=$(this).attr("fid"); isCollect(false,fid,caption,$(this)); }); //未收藏->已收藏 objGrid.find("table tbody span[class='img_uncollect']").click(function(){ caption=$(this).attr("caption"); fid=$(this).attr("fid"); isCollect(true,fid,caption,$(this)); }); } /*收藏操作*/ function isCollect(isCancel,fid,caption,obj){ $.ajax({ type:"get", cache:false, contentType:"application/json;charset=utf-8", url:"/Ajax/AjaxMethod.ashx", data:{action:"collect",ID:fid,mouldId:options.mouldId,caption:caption,isCancel:isCancel}, success:function(msg){ if(msg){ init(); Menu(); } } }); } /*菜单刷新*/ function Menu(){ //获取当前网址 var curWwwPath = window.document.location.href; //获取主机地址之后的目录 var pathName = window.document.location.pathname; var pos = curWwwPath.indexOf(pathName); //获取主机地址 var localhostPaht = curWwwPath.substring(0, pos); $.post(localhostPaht + "/PageStructure/MasterPage/MenuHandler.ashx?type=RefreshMenu", function(data) { $("#jsddm").empty(); $("#jsddm").html(data); $("#jsddm > li").children("a").attr("limit","6");//导航栏菜单显示字数限制 $(document.body).limit(); $(document.body).menuonload(); // }); } }; })(jQuery);
调用方法：
//列表页Normal HTML加载 $("#lblList").grid({mouldId:$("#ctl00_FumaHead_hidMouldID").val(),url:"/Ajax/AjaxMethod.ashx"});
前台HTMl
<asp:Content ID="Content1" ContentPlaceHolderID="FumaHead" runat="server"> <%--jquery easy ui--%> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Common/Js/EasyUI/easyUI/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Common/Js/EasyUI/easyUI/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Common/Js/EasyUI/easyUI/demo/demo.css"> <script type="text/javascript" src="http://www.cnblogs.com/Common/Js/EasyUI/easyUI/jquery.easyui.min.js"></script> <script src="http://www.cnblogs.com/Common/Js/My97DatePicker/WdatePicker.js" type="text/javascript"></script> <%--end--%> <%--弹出框--%> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Common/Js/artDialog/skins/default.css" /> <script type="text/javascript" src="http://www.cnblogs.com/Common/Js/artDialog/jquery.artDialog.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/Common/Js/artDialog/plugins/iframeTools.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/Common/Js/dialog.js"></script> <%--end--%> <script type="text/javascript" src="http://www.cnblogs.com/Common/Js/grid.js"></script> <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Common/Js/normal.js"></script> <form runat="server"> <div class="pos"><%--当前位置：客户管理 » 客户列表--%></div> <div class="hspace"></div> <table width="98%" align="center" cellpadding="0" cellspacing="0" border="0" class="search"> <tr> <td> <!--搜索栏 --> <div class="visible"> <%--按条件搜索--%> <ul> <li>关键字<input name="txtKeyWord" type="text" /> </li> <li>在这儿查找 <input id="sltMultiple" name="dept" readonly="readonly" /> </li> <li>精确查找 <input type="checkbox" name="chkBox" id="sltCheck" /> </li> </ul> </div> <div class="hidden"> <ul> <%--更多高级选项--%> <li id="moreAdvice"></li> <%--日期--%> <li id="moreDate"></li> </ul> </div> </td> <td width="200"> <div class="s_panel"> <button id="btnClear"> 清空</button> <button id="btnSearch"> 搜索</button> </div> </td> <td width="40"> <div id="condimore"> <div class="show" onclick="openSelect();" title="查看更多搜索条件"> </div> <div class="hide" onclick="openSelect();" title="收起更多搜索条件"> </div> </div> </td> </tr> </table> <div class="list"> <!--右侧列表栏 --> <div class="forma"> <label> 操作<select style=" 140px;" name="operate"> <option value="-1">--请选择--</option> <option value="0">新建</option> <option value="1">修改</option> <option value="2">打开</option> <option value="3">删除</option> </select> </label> <label> 工作流<select style=" 140px;" name="workfollow"><option value="-1">--请选择--</option> </select> </label> </div> <div class="container"> <div id="lblList"> </div> <div class="clear"></div> </div> <div class="hspace"></div> <div class="forma" > <label> 操作<select style=" 140px;" name="operate"> <option value="-1">--请选择--</option> <option value="0">新建</option> <option value="1">修改</option> <option value="2">打开</option> <option value="3">删除</option> </select> </label> <label> 工作流<select style=" 140px;"><option value="-1">--请选择--</option> </select> </label> </div> <div class="hspace"></div> </div> <%--详细页弹出框--%> <div class="mask"> </div> <div class="detail" style="display: none;"> <div class="bar"> <div id="closed"> </div> </div> <dl> <span id="winTitle"></span> <dd style="overflow-x: auto"> <span id="winBody"></span> </dd> </dl> </div> <%--end--%> <input runat="server" type="hidden" id="hidMouldID" /> <%--隐藏域保存生成的HTML用于清空按钮清空控件值--%> <input type="hidden" id="hidSelectHtml" /> </form> </asp:Content>
后台ashx
#region 列表页-Normal /// <summary> /// 根据模块ID用户Id展示列表页 /// </summary> /// <param name="mouldId">模块ID</param> /// <param name="empId">登陆人ID</param> /// <param name="pageIndex">页码</param> /// <param name="pageSize">每页显示条数</param> /// <param name="orderField">排序字段</param> /// <param name="orderType">排序规则</param> /// <param name="searchSql">搜索条件</param> /// <param name="context">context</param> public void BindNormalList(string mouldId, string empId, int pageIndex, int pageSize, string orderField, string orderType, string searchField, HttpContext context) { try { DataTable StructList = _createPageManager.GetStructPanel(mouldId, empId, 1); DataTable TableList = _createPageManager.GetMouldTableLinks(mouldId); DataTable FieldList = _createPageManager.GetMouldFieldList(mouldId, empId); StringBuilder sbPageHtml = new StringBuilder(); if (StructList == null || TableList == null || FieldList == null || StructList.Rows.Count <= 0 || TableList.Rows.Count <= 0 || FieldList.Rows.Count <= 0) { context.Response.Write("{data:'<div style=\" text-align:center; border-color:Red; font-size:larger；\" class=\"list\">抱歉，没有找到您要的相关数据！</div>',total:0}"); return; } context.Session["mouldName"] = StructList.Rows[0]["MouldName"].ToString(); sbPageHtml.Append("<table class=\"grid\" cellspacing=\"1\" border=\"0\" id=\"gvList\"><thead><tr>"); DataRow[] drList = FieldList.Select("IsUse=1 and IsListShow=1 and SQLNo=1", "OrderNo");//显示字段 DataRow[] drPkField = FieldList.Select("IsUse=1 and IsPkField=1 and SQLNo=1", "OrderNo");//获取主键 string pkField = drPkField.Length > 0 ? drPkField[0]["FieldName"].ToString() : "FID"; //主键名 string order = string.Empty; if (!string.IsNullOrEmpty(orderType)) order = orderField + " " + orderType; //数据源 if (!string.IsNullOrEmpty(searchField)) searchField = " AND " + searchField; DataTable SourceTable = _createPageManager.GetDataSourceByPage(mouldId, StructList, TableList, FieldList, StructList.Rows[0], "", searchField, pageIndex, pageSize, order); //全选&操作（收藏、弹出框） sbPageHtml.Append("<th align=\"center\" title=\"全选\"><input type=\"checkbox\" onclick=\"chkAll(this)\" class=\"checkall\"></th>"); sbPageHtml.Append("<th align=\"center\" >序号</th>"); sbPageHtml.Append("<th align=\"center\" >操作</th>"); //end int total = Convert.ToInt32(_createPageManager.GetDataSourceByPage(mouldId, StructList, TableList, FieldList, StructList.Rows[0], "", searchField, 0, pageSize).Rows[0][0].ToString()); foreach (DataRow row in drList) { sbPageHtml.AppendFormat("<th align=\"center\" field=\"{0}\" title=\"点击标题行{1}排序\" ordertype=\"{2}\">{1}</th>", row["FieldName"].ToString().Replace("'", "‘"), row["FieldCaption"], orderType.Length == 0 ? "desc" : orderType); } sbPageHtml.Append("</tr></thead><tbody>"); //获取当前收藏行 HomePageManager homeManager = new HomePageManager(); string collectList = homeManager.GetMouldCollectionIdList(empId, mouldId); //已收藏的序号 var list = collectList.TrimEnd(',').Split(','); DataRow[] drBillNoField = StructList.Select("SQLNo=1 AND StrucLevel=1 AND ParSQLNo=0");//用于收藏 传递FieldCaption值 string billNoField = drBillNoField.Length > 0 ? drBillNoField[0]["BillNoField"].ToString() : "ScNo"; //end //行统计 string summaryList = _createPageManager.GetSummaryTypeList(mouldId, "1"); string tableName = _createPageManager.GetTableName(TableList, "1").ToString(); if (!string.IsNullOrEmpty(summaryList)) { DataTable dtSummary = _createPageManager.GetSummaryOfRecords(summaryList, tableName, " 1=1 " + searchField); DataRow sumRow = SourceTable.NewRow(); for (int i = 0; i < dtSummary.Columns.Count; i++) { sumRow[dtSummary.Columns[i].ColumnName] = dtSummary.Rows[0][dtSummary.Columns[i].ColumnName]; } if (SourceTable != null && SourceTable.Rows.Count > 0) SourceTable.Rows.Add(sumRow); } //end StringBuilder sbTable = new StringBuilder(); bool isMatch;// 是否收藏 ：false表示收藏 //pkFieldValue :主键值; string pkFieldValue = string.Empty; foreach (DataRow rowBody in SourceTable.Rows) { pkFieldValue = rowBody[pkField].ToString(); #region 校验是否收藏 isMatch = true; //isMatch = Regex.IsMatch(collectList.TrimEnd(','), "^((?!" + pkFieldValue + ").)*$"); //正则表达式判断有缺陷 if (!string.IsNullOrEmpty(collectList)) { for (int i = 0; i < list.Length; i++) { if (!string.IsNullOrEmpty(pkFieldValue) && !string.IsNullOrEmpty(list[i]) && string.IsNullOrEmpty(list[i].Replace(pkFieldValue, ""))) { isMatch = false; break; } } } #endregion //checkbox&收藏、弹出框 if (string.IsNullOrEmpty(pkFieldValue) && string.IsNullOrEmpty(rowBody["rownum"].ToString()) && SourceTable.Rows.Count > 0) sbTable.Append("<tr><td align=\"center\" colspan=\"3\">合计</td>"); else { sbTable.AppendFormat("<tr><td align=\"center\" ><input id=\"{3}\" type=\"checkbox\" name=\"{3}\"/></td> <td>{0}</td> <td align=\"center\" ><div class=\"imgdiv\"><span class=\"{1}\" caption=\"{2}\" fid=\"{3}\" style=\"cursor:pointer;\" title=\"收藏\"></span> <span class=\"img_detail\" onclick=\"showDetail({3})\" fid=\"{3}\" style=\"cursor: pointer; \" title=\"打开\"> </span></div></td>" , rowBody["rownum"], (isMatch ? "img_uncollect" : "img_collect"), (string.IsNullOrEmpty(billNoField) ? "" : rowBody[billNoField]), pkFieldValue); } foreach (DataRow row in drList) { sbTable.AppendFormat("<td align=\"center\">{0}</td>", rowBody[row["FieldAlias"].ToString()].ToString().Replace("'", "‘")); } sbTable.Append("</tr>"); } //无信息提醒 if (SourceTable == null || SourceTable.Rows.Count == 0) { sbTable.AppendFormat("<tr align=\"center\" ><td colspan=\"{0}\"> 抱歉，没有找到符合您搜索条件的数据 </d></tr>", (drList.Length + 3)); } sbPageHtml.Append(sbTable); sbPageHtml.Append("</tbody></table>"); context.Response.Write("{data:'" + sbPageHtml.ToString() + "',total:" + total + "}"); } catch (Exception ex) { context.Response.Write("{data:'<div style=\"text-align:center; border-color:Red; font-size:larger\" class=\"list\">" + ex.Message + "</div>',total:0}"); } } #endregion