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: 400, height: 150, 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, 255), }; parameters[0].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 = 0; //設置內容：把(remark[y].ToString() == username)的remark添加進去 ArrayList contelist = new ArrayList(); for (int y = 0; 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 == 1 && cou <= rows) { //根據前台 rows 得到 content for (int i = 0; i < rows - (rows - cou); i++) { list.Add(contelist[i]); } foreach (var cc in list) { tt += cc + ","; } } //page是第1頁 and 總數大於行數（例：總數11，行數10） else if (page == 1 && cou > rows) { //根據前台 rows 得到 content for (int i = 0; i < rows; i++) { list.Add(contelist[i]); } foreach (var cc in list) { tt += cc + ","; } } //page不等於1 and 總數大於行數 else if (page != 1 && cou > rows) { //行數乘以頁數減去總數大於0，說明：（總數：31，頁數：4，顯示最后1行） if (rows*page - total > 0) { for (int i = (page - 1)*rows; i < cou; i++) { list.Add(contelist[i]); } foreach (var cc in list) { tt += cc + ","; } } //行數乘以頁數減去總數小於等於0，（總數：31，頁數：2，顯示10行） else if (rows*page - cou <= 0) { for (int i = (page - 1)*rows; i < rows*page; i++) { list.Add(contelist[i]); } foreach (var cc in list) { tt += cc + ","; } } } if (total == 0) { context.Response.Write(json); } else { string jsonstring = "{\"total\":" + cou + ",\"rows\":[" + tt.ToString() + "]}"; context.Response.Write(jsonstring.Remove(jsonstring.Length - 3, 1)); } //} //} } 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');