1.进度条
2.JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法
3. 三张表的连接查询现在到datagrid里
4.日期组合框DateBox设置readonly的解决方法
1.进度条
//数据更新
$('#A3').click(function () { $.messager.progress({
title:
'请稍后', msg: '页面加载中...'
});
$.post("Update.ashx", $("#EditForm").form().serialize(),
function (msg) {
//alert(msg);
if (msg != 0) {
//刷新当前页reload
_datagrid.datagrid('reload', {
DeviceNumber: '',
});
$.messager.show({
title: '提示',
msg: "更新" + msg + "条数据！",
showType: 'show'
});
setTimeout(function
() { $.messager.progress('close'); }, 100
);
} else { $.messager.show({
title: '提示',
msg: "没有更新！",
showType: 'show'
});
setTimeout(function
() { $.messager.progress('close'); }, 100
);
} }, 'json');
2.JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法
var dlg = $('#dd').dialog({
title: '导入excel,请选择..',
width: ,
height: ,
closed: true,
cache: false,
modal: true,
//href: '../UpLoad.aspx'
});
//在点击按钮打开Dialog时，将div append到form里，使按钮生效。
dlg.parent().appendTo(jQuery("#form1"));
//导入excel
$('#A2').click(function () {
dlg.dialog('open');
//console.info(dlg.parent());
});
html
<form id="form1" runat="server">
<div id="dd">
<div>
<div id="fileQueue" style="margin-left: 20px">
<p>
<asp:FileUpload ID="FileUpload_excel" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</div>
</div>
</form>
解决方法：在点击按钮打开Dialog时，将div append到form里，使按钮生效。
将弹出div append到属于form里的div，那么服务器端控件就可以正常执行
3. 三张表的连接查询现在到datagrid里
3.1 存储过程：
------------------------------------
--用途：查询PKE_DeviceContent与PKE_Franchiser还有PKE_DeviceNumber的3张表的连接查询
--项目名称：
--说明：查询PKE_DeviceContent多余的数据
--时间：2013-09-08 20:11:23
------------------------------------
ALTER PROCEDURE [dbo].[PKE_DeviceContent_Select]
@GetOne nvarchar(50)
AS
select a.ConID,a.DeviceNumber,a.longitude,a.latitude,a.AlarmStatus,a.uploadtime,
a.vehicleState,a.PositionStatus,a.BeginTime,a.EndTime,a.Adderss,b.FranchiserName,c.Remark from
PKE_DeviceNumber b
inner join dbo.PKE_Franchiser c
on
c.FranchiserName=b.FranchiserName
inner join PKE_DeviceContent a
on
a.DeviceNumber=b.DeviceNumber
where a.DeviceNumber like '%'+@GetOne+'%'
3.2 页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PKE_DeviceContent.aspx.cs" Inherits="Easyui.Web.PKE_DeviceContent.PKE_DeviceContent" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设备列表</title>
<script src="../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script src="../Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<link href="../Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet">
<link href="../Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
<script src="../Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
<script src="../Scripts/date.js"></script>
<link href="../css/cxlb.css" rel="stylesheet" />
<script type="text/javascript">
var LoginInputForm;
var _datagrid;
$(function () {
_datagrid = $('#datagrid').datagrid({
//传递额外的参数
queryParams: {
GetOneID: '',
PassWord: '',
},
url: 'PKE_DeviceContent.ashx',
rownumbers: true,//显示行号
idField: '设备号',//支持翻页后（记忆）——例：跨页删除
//fitColumns: true,//设置为true将自动使列适应表格宽度以防止出现水平滚动。
pagination: true,
nowarp: false, //内容换行：false（换） true（不换）
//fit:true, //自适应
pageSize: 10,
loadMsg: "努力加载中...",
singleSelect: true,
pageList: [10, 20, 30],
//toolbar: [{
// text: '新增',
// iconCls: 'icon-add', //}, '-', {
// text: '修改',
// iconCls: 'icon-edit',
//}, '-', {
// text: '删除',
// iconCls: 'icon-remove',
//}, '-', {
// text: '取消多选',
// iconCls: 'icon-redo',
//}
//],
columns: [[
{ field: 'ConID', title: '序列号', width: 100 },
{ field: 'Remark', title: '客服', width: 150 },
{
field: 'DeviceNumber',
title: '设备号',
width: 100,
},
{ field: 'AlarmStatus', title: '报警状态', width: 150 },
{ field: 'vehicleState', title: '车辆状态', width: 150 },
{ field: 'PositionStatus', title: '定位状态', width: 150 },
{ field: 'uploadtime', title: '上传时间', width: 150 },
{ field: 'BeginTime', title: '开通时间', width: 150 },
{ field: 'EndTime', title: '到期时间', width: 150 },
{
field: 'Adderss', title: '操作', width: 100,
formatter: function (value, row, index) {
return '<a style="cursor:pointer;" onclick="show(' + index + ')">详细</a>';
}
}
]],
loadFilter: function (data) {
//console.info(data.rows);
if (data.rows=="004") {
$.messager.alert('Warning', '您的权限已经过期！\n 请重新登录！！');
} else {
return data;
}
}
}); //查询
$('#btn').click(function () {
_datagrid.datagrid('load', {
GetOneID: $('#cx_lb').find("[name='username']").val(),
//PassWord: $('#cx_lb').find("[name='PassWord']").val(),
});
}); //清空
$('#A1').click(function () {
_datagrid.datagrid('load', {
GetOneID: '',
});
$('#cx_lb').find('input').val('');
}); $.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function (value, param) {
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
}); }); function show(i) {
var row = _datagrid.datagrid('getRows');
console.info(row[i]);
$(".pageFormContent").dialog({
title: '详细记录',
closable: true,
modal: true,
buttons: [{
text: '添加',
iconCls: 'icon-ok',
handler: function () {
//***先验证（根据自己的需求）
//if (LoginInputForm.form('validate')) {
//1.表单form提交
//LoginInputForm.submit(); //2.ajax提交
$.ajax({
type: "POST",
url: "Add.ashx",
dataType: "json",
data: $('#LoginInputForm').form().serialize(), success: function (msg) {
//alert(msg);
if (msg == "1") {
$("#LoginAndRegDialog").dialog("close");
_datagrid.datagrid('load', {
UserName: '',
});
$.messager.show({
title: '提示',
msg: "添加成功！"
});
} else if (msg == "0") {
//alert($("#LoginInputForm input[name='name']").val());
$.messager.show({
title: '提示',
msg: "账号【" + $("#LoginInputForm input[name='name']").val() + "】已经存在，请重新填写！"
});
} }
});
//}
}
}]
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
</form>
<div class="easyui-layout" fit="true">
<div data-options="region:'north',title:'查询列表',split:true" class="datagrid-toolbar" style="height: 75px;">
<form id="cx_lb">
<table class="cx_lb_table">
<tr>
<th>设备号：</th>
<td width="200">
<input type="text" name="username" /></td>
<td>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
</td>
<td>
<a id="A1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">清空</a>
</td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',title:'本地设备列表'" style="padding: 5px; background: #eee;">
<table id="datagrid"></table>
</div> </div> </body>
</html>
3.3 一般处理程序PKE_DeviceContent.ashx
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using Newtonsoft.Json.Linq; namespace Easyui.Web.PKE_DeviceContent
{
/// <summary>
/// PKE_DeviceContent1 的摘要说明
/// </summary>
public class PKE_DeviceContent1 : IHttpHandler, IRequiresSessionState
{
private HttpRequest Request;
private DataSet ds;
private string json; public void ProcessRequest(HttpContext context)
{ Request = context.Request;
int rows = int.Parse(Request["rows"]);
int page = int.Parse(Request["page"]);
string getOne = Request["GetOneID"];
//session 账号
//string username = Convert.ToString(context.Session["username"]);
string username = "tangge";
//验证账号
//if (string.IsNullOrEmpty(username))
//{
// context.Response.Write("{\"rows\":\"004\"}");
//}
//else
//{
context.Response.ContentType = "text/html";
SqlParameter[] parameters =
{
new SqlParameter("@GetOne", SqlDbType.VarChar, ),
};
parameters[].Value = getOne; DataSet ds = DBUtility.DbHelperSQL.RunProcedure("PKE_DeviceContent_Select", parameters,
"PKE_DeviceContent"); json = DBUtility.JsonConvert.DatasetToJson(ds); JObject jObj = JObject.Parse(json);
JToken ageToken = jObj["total"];
int total = int.Parse(ageToken.ToString()); //转化为Jarray
JArray jconte = (JArray) jObj["rows"]; //names：返回所有Remark（客服姓名）
//var names = from staff in jObj["rows"].Children()
// select (string)staff["Remark"];
var remark = jObj.SelectToken("rows").Select(p => p["Remark"]).ToList();
; //设置行数：相当于total(如：客服tangge,数量5个，cou就等于5)
int cou = ;
//设置内容：把(remark[y].ToString() == username)的remark添加进去
ArrayList contelist = new ArrayList(); for (int y = ; y < remark.Count; y++)
{
if (remark[y].ToString() == username)
{
cou++;
contelist.Add(((remark[y].Parent)).Parent);
}
} ArrayList list = new ArrayList(); string tt = null;
//如果page是第1页and总数小于行数（例：总数4，行数10）
if (page == && cou <= rows)
{
//根据前台 rows 得到 content
for (int i = ; i < rows - (rows - cou); i++)
{
list.Add(contelist[i]);
} foreach (var cc in list)
{
tt += cc + ",";
}
} //page是第1页 and 总数大于行数（例：总数11，行数10）
else if (page == && cou > rows)
{
//根据前台 rows 得到 content
for (int i = ; i < rows; i++)
{
list.Add(contelist[i]);
} foreach (var cc in list)
{
tt += cc + ",";
}
}
//page不等于1 and 总数大于行数
else if (page != && cou > rows)
{
//行数乘以页数减去总数大于0，说明：（总数：31，页数：4，显示最后1行）
if (rows*page - total > )
{
for (int i = (page - )*rows; i < cou; i++)
{
list.Add(contelist[i]);
} foreach (var cc in list)
{
tt += cc + ",";
}
}
//行数乘以页数减去总数小于等于0，（总数：31，页数：2，显示10行）
else if (rows*page - cou <= )
{
for (int i = (page - )*rows; i < rows*page; i++)
{
list.Add(contelist[i]);
} foreach (var cc in list)
{
tt += cc + ",";
}
} }
if (total == )
{
context.Response.Write(json);
}
else
{
string jsonstring = "{\"total\":" + cou + ",\"rows\":[" + tt.ToString() + "]}";
context.Response.Write(jsonstring.Remove(jsonstring.Length - , ));
}
//}
//}
} public bool IsReusable
{
get
{
return false;
}
}
}
}
4.日期组合框DateBox设置readonly的解决方法。
//继承自combo，使用combo的editable属性设置readonly.
$("#BeginTime").datebox({ editable: false });
//$("#Content input[name='BeginTime']").attr('readonly', 'readonly');
$("#EndTime").datebox({ editable: false });
//$("#Content input[name='EndTime']").attr('readonly', 'readonly');