EasyUi – 6.easyui常见问题
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');
