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: ,
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');
EasyUi – 6.easyui常见问题的更多相关文章
- SpringMVC +mybatis+spring 结合easyui用法及常见问题总结
SpringMVC +mybatis+spring 结合easyui用法及常见问题总结 1.FormatString的用法. 2.用postAjaxFillGrid实现dataGrid 把form表单 ...
- 【easyui】—easyui教你编写一个前台的架子
以前做项目都是在别人搭建好的环境下直接编写单独的页面,也没有处理过怎么搭建一个框架.看到别人的布局都挺好的,自己也想做一个走一下流程. 嘿,刚开始时看着别人写的代码,去找怎么写. 这是我自己的想法,使 ...
- EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
- 杂项： EasyUI | jQuery EasyUI
ylbtech-杂项-JS: EasyUI | jQuery EasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻 ...
- EasyUI介绍及常见问题
JQuery Easy UI介绍 1.JQuery Easy UI环境搭建和调试: https://jingyan.baidu.com/article/67508eb4342f9f9cca1ce426 ...
- EasyUi – 6.easyui常见问题
1.进度条 2.JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 3. 三张表的连接查询现在到datagrid里 4.日期组合框DateBox设置readonly ...
- 【Asp.Net使用EasyUI】EasyUI combox实现联动
很多时候都会用到combox的联动效果,选择上一个combox的值就自动带出这个值对应的其它信息,比如省市联动,最近我也刚好遇到了类似的要求,是用EasyUI combobox 控件完成的,如果是A ...
- [easyui] - 在easyui的table中展示提示框
因为在easyui的table中字段过多,而无法展示全时,被迫只能使用这个方法. 使用方式: 在 $('#dg').datagrid({ 后的 queryParams: form2Json('sear ...
- 【EasyUI】——EasyUI的布局
做一个站点首先要有站点的布局,所谓的布局事实上就是网页的排版.就是说你的网页显示时是什么样子的. 就比方百度的首页: 无论是谁登录.网页都是这个样式的. EasyUI中的网页布局一共分为五部分,分别为 ...
随机推荐
- Hadoop1.2.1异常No route to host
Hadoop1.2.1异常Bad connect ack with firstBadLink (No route to host ) 0.说明 Hadoop集群之前运行正常,增加了新节点之后,需要执行 ...
- 【分块，莫队】【P4396】【AHOI2013】作业
传送门 Description 此时己是凌晨两点,刚刚做了Codeforces的小A掏出了英语试卷.英语作业其实不算多,一个小时刚好可以做完.然后是一个小时可以做完的数学作业,接下来是分别都是一个小时 ...
- BNU-2017.7.5排位赛3总结
链接:https://www.bnuoj.com/v3/contest_show.php?cid=9148#info A题 满足条件的只有(1,2,4),(1,2,6),(1,3,6),所以先满足4, ...
- 使用 ant 构建的一个例子
在项目根目录下新建一个 build.xml 文件,内容如下: <?xml version="1.0"?> <project name="javatest ...
- TCP与UDP区别详解
TCP协议与UDP协议的区别 首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UDP协议的区别,我觉得这是没有从本质上弄清楚网络通信! ...
- css中px em rem vw vh vmax vmin等单位的区别--转载
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- [DeeplearningAI笔记]序列模型1.7-1.9RNN对新序列采样/GRU门控循环神经网络
5.1循环序列模型 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.7对新序列采样 基于词汇进行采样模型 在训练完一个模型之后你想要知道模型学到了什么,一种非正式的方法就是进行一次新序列采 ...
- 将new Date() 格式化为 ’2018-10-11‘ 的字符串格式
function dateToString( date , format ){ if(!date) return ""; if (!Common.type.isDate(date) ...
- Mahout源码目录说明&&算法集
Mahout源码目录说明 mahout项目是由多个子项目组成的,各子项目分别位于源码的不同目录下,下面对mahout的组成进行介绍: 1.mahout-core:核心程序模块,位于/core目录下: ...
- Spring Boot工程结构推荐
工程结构(最佳实践) Spring Boot框架本身并没有对工程结构有特别的要求,但是按照最佳实践的工程结构可以帮助我们减少可能会遇见的坑,尤其是Spring包扫描机制的存在,如果您使用最佳实践的工程 ...