钟表维修管理系统技术解析 MVC构架搭建连接：http://blog.youkuaiyun.com/gx_liangwenlong/article/details/46003279
工单查询模块
工单查询这个模块可以查看各个门店录入的单据。可以通过日期、状态、工单编号、关键字等条件对单据进行筛选查询。还可以对单据进行修改、报废、导出Excel等操作，
还具有分页功能，调整数据显示行数等。
功能实现思路：
查询数据的条件有日期、状态、工单编号、关键字，工单查询页面打开时会自动查询出前三个月的单据，如果状态选择全部则查询全部的数据，否则就通过选择的状态来筛选单据，如过工单编号、关键字不填写则不通过这两个条件来筛选单据，也可以通过多个条件来筛选单据。
界面效果图：
2.2.2（图1）
从界面上可以看到我们这里用到的控件有
| 控件名称 | 说明 |
| 日期控件（easyui-datebox） | 第一要设置每个控件的id，第二设置大小不设置也有默认，第三（data-options）是数据操作:可以设置控件的一些属性和事件 |
| 单行文本控件（easyui-textbox） | |
| 按钮（easyui-linkbutton） | |
| 表格（easyui-datagrid） | |
| 下拉框（easyui-combobox） |
查询功能实现：
第一步：数据库
1、 表与关系
2.2.2 （图2）
表1：工单录入表（pw_GongDianLuRu）
用于存放钟表录入的信息
| 列名 | 数据类型 | 主键/外键 | 说明 |
| GongDanLuRuID | int | 主键 | 工单录入ID |
| YuanShiDanHaoID | int | 外键 | 原始单号ID |
| GongDanZhuanTaiID | int | 外键 | 工单状态ID |
| JinEZhuangTaiID | int | 外键 | 金额状态ID |
| GongDanLeiXingID | int | 外键 | 工单类型ID |
| KeHuID | int | 外键 | 客户ID |
| JianXiuLeiXingID | int | 外键 | 检修类型ID |
| PinPaiID | int | 外键 | 品牌ID |
| GongDanRiQi | date |
| 工单日期 |
| GongDanBianHao | nchar(50) |
| 工单编号 |
| SongXiuRiQi | data |
| 送修日期 |
| YuFanRiQi | data |
| 预返日期 |
| FenYongJinE | decimal(18, 2) |
| 费用金额 |
| ZhongBiaoLeiXing | nchar(10) |
| 钟表类型 |
| BiaoKuan | nchar(10) |
| 表款 |
| GuiGe | text |
| 规格/名称 |
| XiuPeiJiLu | text |
| 修配记录 |
| JiXinXingHao | nchar(50) |
| 机芯号 |
| BiaoXingHao | nchar(50) |
| 表型号 |
| BiaoShenHao | nchar(50) |
| 表身号 |
| BiaoDaiJieShu | nchar(50) |
| 表带节数 |
| ZhongBiaoQiTaoMiaoShu | varchar(200) |
| 钟表其他描述 |
| WaiGuan | text |
| 外观 |
| KeHuZhiShu | varchar(200) |
| 客户自述 |
| YouXiaoFou | Bit |
| 有效否 |
表2：员工表（sys_YuanGong）
| 列名 | 数据类型 | 主外键 | 说明 |
| YuanGongID | int | 主键 | 员工ID |
| LuRuYuanID | int | 外键 | 录入员ID |
| JueSeID | int | 外键 | 角色ID |
| YuanGongZhuangTaiID | int | 外键 | 员工状态ID |
| MenDianID | int | 外键 | 门店ID |
| YuanGongBianHao | nchar(50) |
| 员工编号 |
| YuanGongXingMing | nchar(50) |
| 员工姓名 |
| XingBie | nchar(50) |
| 性别 |
| JiGuan | nchar(50) |
| 籍贯 |
| XueLi | nchar(50) |
| 学历 |
| ChuShengRiQi | date |
| 出生日期 |
| ShenFenZhengHao | nchar(50) |
| 身份证号 |
| RuZhiRiQi | date |
| 入职日期 |
| RuZhiDiDian | nchar(50) |
| 入职地址 |
| YiDongShouJi | nchar(50) |
| 移动手机 |
| JiaTingDianHua | nchar(50) |
| 家庭电话 |
| DiXin | nchar(50) |
| 底薪 |
| DianZiYouXiang | nchar(50) |
| 电子邮箱 |
| TongXunDiZhi | nchar(100) |
| 通讯地址 |
| BeiZhu | nchar(100) |
| 备注 |
| GengXinShiJian | datetime |
| 更新时间 |
| YouXiaoFou | bit |
| 有效否 |
| MiMa |
|
| 密码 |
表3：门店表（sys_MenDian）
| 列名 | 数据类型 | 主外键 | 说明 |
| MenDianID | int | 主键 | 门店ID |
| LuRuYuanID | int | 外键 | 录入员ID |
| ChengShi | nchar(50) |
| 城市 |
| MenDianBianHao | nchar(50) |
| 门店编号 |
| GongZuoZhanMingCheng | nchar(50) |
| 门店名称 |
| LianXiDianHua | nchar(50) |
| 联系电话 |
| ChuanZhenDianHua | nchar(50) |
| 传真号码 |
| YouZhengBianMa | nchar(50) |
| 邮政编码 |
| DianNaoXiTong | nchar(50) |
| 电脑系统 |
| KuanDaiYongHu | nchar(50) |
| 宽带账号 |
| KuanDaiMiMa | nchar(50) |
| 宽带密码 |
| XiangXiDiZhi | nchar(50) |
| 详细地址 |
| BeiZhu | nchar(500) |
| 备注 |
| BaoXiuZhengCi | text |
| 保修政策 |
| JianLiShiJian | date |
| 建立时间 |
| YouXiaoFou | bit |
| 有效否 |
| ZongGongSi | int |
| 总公司（1为true，0为false） |
表4：客户表（ sys_KeHu）
| 列名 | 数据类型 | 主外键 | 说明 |
| KeHuID | int | 主键 | 客户ID |
| LuRuYuanID | int | 外键 | 录入员ID |
| KeHuLeiXingID | int | 外键 | 客户类型ID |
| KeHuBianHao | nchar(50) |
| 客户编号 |
| KeHuXingMing | nchar(50) |
| 客户名称 |
| XingBie | nchar(10) |
| 性别 |
| ShenFenZhengHao | nchar(50) |
| 身份证号 |
| DianZiYouXiang | nchar(50) |
| 电子邮件 |
| YiDongShouJi | nchar(50) |
| 移动电话 |
| JiaTingDianHua | nchar(50) |
| 家庭电话 |
| ChuShenRiQi | datetime |
| 出生日期 |
| TongXunDiZhi | nchar(200) |
| 通讯地址 |
| YouXiaoFou | bit |
| 有效否 |
| BeiZhi | nchar(200) |
| 备注 |
| GenXinShiJian | datetime |
| 更新时间 |
表5：品牌表（sys_PinPai）
| 列名 | 数据类型 | 主外键 | 说明 |
| PinPaiID | int | 主键 | 品牌ID |
| LuRuYuanID | int | 外键 | 录入员ID |
| PinPaiMingCheng | nchar(50) |
| 品牌名称 |
| PaiXuHao | int |
| 排序号 |
| GengXinShiJian | datetime |
| 更新时间 |
| YouXiaoFou | bit |
| 有效否 |
| BeiZhu | nchar(100) |
| 备注 |
表6：属性明细表（sys_PinPai）
| 列名 | 数据类型 | 主外键 | 说明 |
| ShuXingMingXiID | int | 主键 | 属性明细ID |
| LuRuYuanID | int | 外键 | 录入员ID |
| ShuXingJiHeID | int | 外键 |
|
| ShuXingMingXiMingCheng | nchar(50) |
|
|
| GengXinShiJian | datetime |
|
|
| YouXiaoFou | bit |
|
|
| BeiZhu | nchar(50) |
|
|
控件使用方法：
1、日期控件（easyui-datebox）
作用：显示时间，可以通过时间段来查询数据
日期控件截图：
创建日期控件界面代码：（editable设置可否编辑，formatter可以更改样式）
- <input id="dtpKaiShiShiJian" class="easyui-datebox" style="width: 95px; height: 28px" data-options="editable:false,formatter:RiQi" >
- <input id="dtpJieShuJian" class="easyui-datebox" style="width: 95px; height: 28px" data-options="editable:false,formatter:RiQi" />
赋值给界面控件代码：
- //设置时间的默认值
- function SetStarRiQi() {
- var curr_time = new Date();//获取当前时间
- var strDate = curr_time.getFullYear() + "-";//获取年和拼接字符“-”
- var vMon = curr_time.getMonth() - 2;//获取月，减2是为了获取前3个月，获取月是从0~11，0就是一月•••
- var vDay = curr_time.getDate();//获取天
- strDate += (vMon < 10 ? "0" + vMon : vMon) + "-";//这里有一个三目运运算符，vMon < 10是判断条件，如果符合条件就返回（"0" + vMon），否则就返回（vMon）
- strDate += (vDay < 10 ? "0" + vDay : vDay);
- $('#dtpKaiShiShiJian').datebox('setValue', strDate);//给日期控件赋值
- var date = curr_time.getFullYear() + "-" + curr_time.getMonth() + 1 + curr_time.getDate();
- $('#dtpJieShuJian').datebox('setValue', date);
- }
获取界面控件的值代码：
- $('#dtpKaiShiShiJian').datebox("getValue")
更改样式代码：
- //转换时间格式
- function RiQi(date) {
- var y = date.getFullYear();
- var m = date.getMonth() + 1;
- var d = date.getDate();
- return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
- }
2、下拉框（easyui-combobox）
下拉框控件截图：
2.2.2 （图3）
创建下拉框控件界面代码：
- <input id="cboZhuangTai" class="easyui-combobox" style="width: 125px; height: 28px;" data-options="panelHeight: 'auto'" />
下拉框绑定数据代码：
- $('#cboZhuangTai').combobox({
- url: '../WeiXiuGuanLi/ChaXunGongDanZhuangTai',
- valueField: 'ShuXingMingXiID',
- textField: 'ShuXingMingXiMingCheng',
- editable: false//设置不可编辑
- });
获取下拉框的值代码：
- $('#cboZhuangTai').combobox("getValue");
下拉框控制器代码：
- #region 查询工单状态
- public ActionResult ChaXunGongDanZhuangTai()
- {
- var varGongDanZhuangTai = (from dtGongDanZhuangTai in myMdl.sys_ShuXingMingXi
- where dtGongDanZhuangTai.ShuXingJiHeID == 27
- select dtGongDanZhuangTai).ToList();
- Models.sys_ShuXingMingXi mysys_ShuXingMingXi = new Models.sys_ShuXingMingXi();//实例化一个（Models.sys_ShuXingMingXi）对象
- mysys_ShuXingMingXi.ShuXingJiHeID = 27;//赋值（工单状态）
- mysys_ShuXingMingXi.ShuXingMingXiID = 0;
- mysys_ShuXingMingXi.ShuXingMingXiMingCheng = "全部";
- varGongDanZhuangTai.Add(mysys_ShuXingMingXi);//把对象添加到查询的数据中去
- return Json(varGongDanZhuangTai, JsonRequestBehavior.AllowGet);
- }
- #endregion
3、按钮（easyui-linkbutton）
按钮截图
创建按钮界面层代码：（onclick是定义一个单击事件）
- <a onclick="ClickSelect()" class="easyui-linkbutton" style="width: 70px; height: 28px; line-height:30px;">查询</a>
jQuery代码定义点击事件的方法：
- //查询
- function ClickSelect() {
- CurPage = 1;
- SelectGongDan();//调用查询方法
- }
4. 文本框（easyui-textbox）
作用：用于显示，编辑文本
文本框控件截图
创建文本框控件代码：
- <input id="txtGongDanBianHao" class="easyui-textbox" style="width: 140px; height: 28px" />
获取文本控件值的代码：
- $('#txtGongDanBianHao').val()
赋值给文本框的代码：
- $("# txtGongDanBianHao ").textbox("setValue","放值");
5、给表格赋值
第一步：打开控制器
2.2.2（图3）
linq语法查询数据
1、创建工单查询的函数
- #region 查询工单
- public static int intZongYeShu = 0;
- /// <summary>
- /// 查询工单
- /// </summary>
- /// <param name="dtpKaiShiRiQi">开始日期</param>
- /// <param name="dtpJieShuShiJian">结束日期</param>
- /// <param name="intGongDanZhuangTaiID">工单状态ID</param>
- /// <param name="intJinEZhuangTaiID">金额状态ID</param>
- /// <param name="strMoHu">模糊查询字段</param>
- /// <param name="PageSize">页大小</param>
- /// <param name="CurPage">页码</param>
- /// <param name="intMenDianID">门店ID</param>
- /// <returns></returns>
- public ActionResult SelectGongDan(DateTime dtpKaiShiRiQi, DateTime dtpJieShuShiJian, int intGongDanZhuangTaiID, int intJinEZhuangTaiID,string strMoHu, int PageSize,int CurPage,int intMenDianID)
- {
- dtpJieShuShiJian = dtpJieShuShiJian.AddDays(1);//设置结束日期加一天
- #region 查询的数据
- var varGongDan = from dtGonDan in myMdl.pw_GongDianLuRu
- join dtKeHu in myMdl.sys_KeHu on dtGonDan.KeHuID equals dtKeHu.KeHuID
- join dtPinPai in myMdl.sys_PinPai on dtGonDan.PinPaiID equals dtPinPai.PinPaiID
- join dtJinEZhuangTai in myMdl.sys_ShuXingMingXi on dtGonDan.JinEZhuangTaiID equals dtJinEZhuangTai.ShuXingMingXiID
- join dtGongDanZhuangTai in myMdl.sys_ShuXingMingXi on dtGonDan.GongDanZhuanTaiID equals dtGongDanZhuangTai.ShuXingMingXiID
- join dtGongDanLeiXing in myMdl.sys_ShuXingMingXi on dtGonDan.GongDanLeiXingID equals dtGongDanLeiXing.ShuXingMingXiID
- join dtJieShouYuan in myMdl.sys_YuanGong on dtGonDan.JieShouYuanID equals dtJieShouYuan.YuanGongID
- join dtMenDian in myMdl.sys_MenDian on dtJieShouYuan.MenDianID equals dtMenDian.MenDianID
- join dtYuanShiDanHao in myMdl.pw_GongDianLuRu on dtGonDan.YuanShiDanHaoID equals dtYuanShiDanHao.GongDanLuRuID into JoinedEmpDept
- from dtYuanShiDanHao in JoinedEmpDept.DefaultIfEmpty()
- orderby dtGonDan.GongDanLuRuID descending//倒叙
- where dtGonDan.YouXiaoFou == true && (dtKeHu.KeHuXingMing.Contains(strMoHu) || dtGonDan.GongDanBianHao.Contains(strMoHu) ||
- dtPinPai.PinPaiMingCheng.Contains(strMoHu)) && (dtGonDan.GongDanRiQi >= dtpKaiShiRiQi && dtGonDan.GongDanRiQi <= dtpJieShuShiJian)
- select new
- {
- dtGonDan.GongDanLuRuID,
- dtGonDan.GongDanLeiXingID,
- dtGonDan.KeHuID,
- dtGonDan.PinPaiID,
- dtGonDan.JieShouYuanID,
- dtGonDan.WeiXiuLeiXingID,
- dtGonDan.GongDanZhuanTaiID,
- dtGonDan.GongDanBianHao,
- GongDanRiQi1 = dtGonDan.GongDanRiQi,
- dtKeHu.KeHuXingMing,
- dtKeHu.YiDongShouJi,
- MenDianMingCheng = dtMenDian.GongZuoZhanMingCheng,
- dtKeHu.TongXunDiZhi,
- dtPinPai.PinPaiMingCheng,
- dtGonDan.SongXiuLeiXingID,
- JinEZhuangTaiID = dtJinEZhuangTai.ShuXingMingXiID,
- JinEZhuangTai = dtJinEZhuangTai.ShuXingMingXiMingCheng,
- GongDanZhuangTai = dtGongDanZhuangTai.ShuXingMingXiMingCheng,
- dtGonDan.FenYongJinE,
- GongDanLeiXing = dtGongDanLeiXing.ShuXingMingXiMingCheng,
- LuRuRen = dtJieShouYuan.YuanGongXingMing,
- dtGonDan.ZhongBiaoQiTaoMiaoShu,
- dtGonDan.XiuPeiJiLu,
- dtGonDan.WaiGuan,
- dtJieShouYuan.MenDianID,
- dtGonDan.KeHuZhiShu,
- dtGonDan.BiaoKuan,
- dtGonDan.BiaoDaiJieShu,
- dtGonDan.BiaoXingHao,
- dtGonDan.BiaoShenHao,
- dtGonDan.ZhongBiaoLeiXing,
- dtGonDan.JiXinXingHao,
- dtGonDan.GuiGe,
- SongXiuRiQi1 = dtGonDan.SongXiuRiQi,
- YuFangRiQi1 = dtGonDan.YuFangRiQi,
- dtGonDan.YuanShiDanHaoID,
- YuanShiGongDan = dtYuanShiDanHao != null ? dtYuanShiDanHao.GongDanBianHao : "无原始工单"
- };
- #endregion
- #region 查询的条件
- if (intMenDianID != 0) //判断是否执行门店id筛选数据
- {
- varGongDan = varGongDan.Where(n => n.MenDianID == intMenDianID);
- }
- if (intGongDanZhuangTaiID != 0)
- {
- varGongDan = varGongDan.Where(n => n.GongDanZhuanTaiID == ntGongDanZhuangTaiID);
- }
- if (intJinEZhuangTaiID != 0)
- {
- varGongDan = varGongDan.Where(n => n.JinEZhuangTaiID == intJinEZhuangTaiID);
- }
- #endregion
- #region 进行分页
- int RowCount = varGongDan.Count();
- if (CurPage > 0)//判断是否符合分页条件
- {
- varGongDan = varGongDan.Take(PageSize * CurPage).Skip(PageSize * (CurPage - 1));//进行分页
- }
- #endregion
- #region 转换数据
- int i = 0;
- List<Dictionary<string, object>> myList = new List<Dictionary<string, object>>();
- foreach (var varRow in varGongDan)
- {
- i = i + 1;
- Dictionary<string, object> myDic = new Dictionary<string, object>();
- foreach (System.Reflection.PropertyInfo p in varRow.GetType().GetProperties())
- {
- myDic.Add(p.Name, p.GetValue(varRow, null));
- }
- myDic.Add("GongDanRiQi", varRow.GongDanRiQi1.Value.ToString("yyyy-MM-dd"));
- myDic.Add("SongXiuRiQi", varRow.SongXiuRiQi1.Value.ToString("yyyy-MM-dd"));
- myDic.Add("YuFangRiQi", varRow.YuFangRiQi1.Value.ToString("yyyy-MM-dd"));
- myDic.Add("ZongYeShu", RowCount);
- myDic.Add("order", i);
- myDic.Add("工单编码", varRow.GongDanBianHao);
- myDic.Add("工单日期", varRow.GongDanRiQi1.Value.ToString("yyyy-MM-dd"));
- myDic.Add("客户姓名", varRow.KeHuXingMing);
- myDic.Add("品牌", varRow.PinPaiMingCheng);
- myDic.Add("表款", varRow.BiaoKuan);
- myDic.Add("工单状态", varRow.GongDanZhuangTai);
- myDic.Add("金额状态", varRow.JinEZhuangTai);
- myDic.Add("费用金额", varRow.FenYongJinE);
- myDic.Add("工单类型", varRow.GongDanLeiXing);
- myDic.Add("录入员", varRow.LuRuRen);
- myDic.Add("规格", varRow.GuiGe);
- myDic.Add("外观缺损", varRow.WaiGuan);
- myDic.Add("修配记录", varRow.XiuPeiJiLu);
- myList.Add(myDic);
- }
- #endregion
- return Json(myList, JsonRequestBehavior.AllowGet);
- }
- #endregion
第二步打开视图层（View）
2.2.2（图4）
表格效果图：
2.2.2 （图5）
3-1、创建表格
html代码：
- <table id="dgvGongDan" class="easyui-datagrid" style="width: auto; height: auto" data-options="singleSelect:true ,footer:'#_Paging',onClickRow:onClickRow">
- <thead>
- <tr>
- <th data-options="field:'GongDanLuRuID',width:90,align:'center',hidden:true">
- 工单录入ID
- </th>
- <th data-options="field:'GongDanLeiXingID',width:90,align:'center',hidden:true">
- 工单类型ID
- </th>
- <th data-options="field:'KeHuID',width:90,align:'center',hidden:true">
- 客户ID
- </th>
- <th data-options="field:'PinPaiID',width:90,align:'center',hidden:true">
- 品牌ID
- </th>
- <th data-options="field:'JieShouYuanID',width:90,align:'center',hidden:true">
- 接收员ID
- </th>
- <th data-options="field:'WeiXiuLeiXingID',width:90,align:'center',hidden:true">
- 维修类型ID
- </th>
- <th data-options="field:'GongDanZhuanTaiID',width:90,align:'center',hidden:true">
- 工单状态ID
- </th>
- <th data-options="field:'JinEZhuangTaiID',width:90,hidden:true">
- 金额状态ID
- </th>
- <th data-options="field:'order',width:'auto'">
- </th>
- <th data-options="field:'GongDanBianHao',width:'auto',align:'center'">
- 工单编码
- </th>
- <th data-options="field:'GongDanRiQi',width:'auto',align:'center'">
- 工单日期
- </th>
- <th data-options="field:'KeHuXingMing',width:'auto',align:'center'">
- 客户姓名
- </th>
- <th data-options="field:'YiDongShouJi',width:'auto',align:'center',hidden:true">
- 移动手机
- </th>
- <th data-options="field:'PinPaiMingCheng',width:'auto',align:'center'">
- 品牌
- </th>
- <th data-options="field:'GongDanZhuangTai',width:'auto',align:'center'">
- 工单状态
- </th>
- <th data-options="field:'JinEZhuangTai',width:'auto',align:'center'">
- 金额状态
- </th>
- <th data-options="field:'FenYongJinE',width:'auto',align:'center'">
- 费用金额
- </th>
- <th data-options="field:'GongDanLeiXing',width:'auto',align:'center'">
- 工单类型
- </th>
- <th data-options="field:'LuRuRen',width:'auto',align:'center'">
- 录入员
- </th>
- <th data-options="field:'MenDianMingCheng',width:'auto',align:'center'">
- 所属门店
- </th>
- <th data-options="field:'ZhongBiaoQiTaoMiaoShu',width:100,align:'center',hidden:true">
- 钟表其他描述
- </th>
- <th data-options="field:'XiuPeiJiLu',width:120,align:'center',hidden:true">
- 修配记录
- </th>
- <th data-options="field:'WaiGuan',width:90,align:'center',hidden:true">
- 外观
- </th>
- <th data-options="field:'KeHuZhiShu',width:90,align:'center',hidden:true">
- 客户自述
- </th>
- <th data-options="field:'BiaoKuan',width:60,align:'center'">
- 表款
- </th>
- <th data-options="field:'BiaoDaiJieShu',width:90,align:'center',hidden:true">
- 表带节数
- </th>
- <th data-options="field:'BiaoShenHao',width:90,align:'center',hidden:true">
- 表身号
- </th>
- <th data-options="field:'BiaoXingHao',width:90,align:'center',hidden:true">
- 表型号
- </th>
- <th data-options="field:'TongXunDiZhi',width:90,align:'center',hidden:true">
- 客户地址
- </th>
- <th data-options="field:'ZhongBiaoLeiXing',width:90,align:'center',hidden:true">
- 钟表类型
- </th>
- <th data-options="field:'JiXinXingHao',width:90,align:'center',hidden:true">
- 机芯型号
- </th>
- <th data-options="field:'GuiGe',width:320,align:'center'">
- 规格
- </th>
- <th data-options="field:'SongXiuRiQi',width:120,align:'center',hidden:true">
- 送修日期
- </th>
- <th data-options="field:'YuFangRiQi',width:120,align:'center',hidden:true">
- 预返日期
- </th>
- <th data-options="field:'YuanShiDanHaoID',width:90,align:'center',hidden:true">
- 原始单号ID
- </th>
- <th data-options="field:'YuanShiGongDan',width:130,align:'center',hidden:true">
- 原始工单
- </th>
- </tr>
- </thead>
- </table>
3-2、分页样式截图与html代码
2.2.2 （图6）
- <div class="_Paging" id="_Paging">
- <center>
- <table class="_Layout">
- <tr>
- <td id="_Shop"></td>
- <td><select id="RowCount" title="显示行数" onchange="ClickSelect()" >
- <option value="10">10</option>
- <option value="20" selected="selected">20</option>
- <option value="30">30</option>
- <option value="20">20</option>
- <option value="50">50</option>
- <option value="60">60</option>
- <option value="70">70</option>
- <option value="80">80</option>
- <option value="90">90</option>
- <option value="100">100</option>
- </select>
- </td>
- <td>|</td>
- <td><a href="javascript:;" class="_HomePage" title="首页" onclick="ShouYe()"></a></td>
- <td><a href="javascript:;" class="_PreviousPage" title="上一页" onclick="ShangYiYe()"></a></td>
- <td><input class="_Skip" id="txtTiaoZhuan" title="回车跳转" onkeypress="TiaoZhuan(event)" onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" /></td>
- <td>/<label id="lblZonngYeShu"></label></td>
- <td><a href="javascript:;" class="_NextPage" title="下一页" onclick="XiaYiYe()"></a></td>
- <td><a href="javascript:;" class="_TrailerPage" title="尾页" onclick="WeiYe()"></a></td>
- <td>|</td>
- <td>
- 总记录数：<label class = "_Totals" id="lblZongJiLuShu"></label>条
- </td>
- </tr>
- </table>
- </center>
- </div>
jQuery代码：
参数（页码）：
- var CurPage = 1;
- //查询工单绑定数据到表格
- function SelectGongDan() {
- $("#_revealloading").css("display", "block");
- $.getJSON("../WeiXiuGuanLi/SelectGongDan?dtpKaiShiRiQi=" + $('#dtpKaiShiShiJian').datebox("getValue")
- + "&" + "dtpJieShuShiJian=" + $('#dtpJieShuJian').datebox("getValue")
- + "&" + "intGongDanZhuangTaiID=" + $('#cboZhuangTai').combobox("getValue")
- + "&" + "intJinEZhuangTaiID=" + 0
- + "&" + "strGongDanBianHao=" + $('#txtGongDanBianHao').val()
- + "&" + "strMoHu=" + $('#txtMoHu').val()
- + "&" + "PageSize=" + document.getElementById('RowCount').value//获取一页显示多少行
- + "&" + "CurPage=" + CurPage
- + "&" + "intMenDianID=" + MenDianID,
- function (data) {
- $("#lblZonngYeShu").html(function () {
- if (data.length == 0) {
- CurPage = 0;
- $('#lblZongJiLuShu').html(0);
- return 0;
- }
- else {
- $('#lblZongJiLuShu').html(data[0].ZongYeShu);
- return Math.ceil(data[0].ZongYeShu / document.getElementById('RowCount').value);
- }
- });
- $("#txtTiaoZhuan").val(CurPage);
- $('#dgvGongDan').datagrid('loadData', data);//把数据绑定到表格
- $("#_revealloading").css("display", "none");
- });
- }
- -----分页------
- //下一页
- function XiaYiYe() {
- if ($("#lblZonngYeShu").html() == CurPage) {
- $("#txtTiaoZhuan").val(CurPage);
- alert("已到最后一页");
- return;
- }
- CurPage++;
- SelectGongDan();
- }
- //上一页
- function ShangYiYe() {
- if (CurPage==1) {
- $("#txtTiaoZhuan").val(CurPage);
- alert("已到第一页");
- return;
- }
- CurPage--;
- SelectGongDan();
- }
- //首页
- function ShouYe() {
- if (CurPage == 1) {
- alert("当前页已是首页！");
- } else {
- CurPage = 1;
- SelectGongDan();
- }
- }
- //尾页
- function WeiYe() {
- if (CurPage==$.trim($("#lblZonngYeShu").html())) {
- alert("当前页已是尾页！");
- }else{
- CurPage = $("#lblZonngYeShu").html();
- SelectGongDan();
- }
- }
- //跳转
- function TiaoZhuan(e) {
- if(e.keyCode != 13) {
- return;
- }
- if ($("#txtTiaoZhuan").val() == "") {
- alert("请输入您要跳转的页数");
- $("#txtTiaoZhuan").val(CurPage);
- return;
- }
- if (Number($.trim($("#txtTiaoZhuan").val())) > Number($.trim($("#lblZonngYeShu").html()))) {
- alert("您输入的页数大于当前总页数");
- $("#txtTiaoZhuan").val(CurPage);
- return;
- }
- if (Number($.trim($("#txtTiaoZhuan").val()))<=0) {
- alert("您输入的页数不能为负数");
- $("#txtTiaoZhuan").val(CurPage);
- return;
- }
- CurPage = $("#txtTiaoZhuan").val();
- SelectGongDan();
- }
- //查询
- function ClickSelect() {
- CurPage = 1;
- SelectGongDan();
- }
仅供学习，禁止用于商业用途
扫一扫
6656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
