EasyUI DataGrid使用示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUIDemo.aspx.cs" Inherits="C_EasyUIDemo" %> <!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>EasyUI DataGrid示例</title>
<!--easyui-->
<link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/icon.css" />
<script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.min.js"></script>
<script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
$(function () {
var IsCheckFlag = true;
$("#tt").datagrid({
title: "数据分页",
url: "easyuihandler.ashx?method=query",
width: "100%",
height: "628px",
striped: true, //交替行换色
rownumbers: true, //行号
pagination: true, //显示底部分页
fitColumns: true,//自动适应。先给列随便加个宽度
toolbar: "#tb",
checkOnSelect: false, //true,当用户点击行的时候该复选框就会被选中或取消选中。
selectOnCheck: true, //true,单击复选框将永远选择行。
onClickRow: function (index, row) {
var d_id = row["d_id"];
//alert(d_id);
},
onClickCell: function (rowIndex, field, value) {
//alert(value);
IsCheckFlag = false;
},
onSelect: function (rowIndex, rowData) {
if (!IsCheckFlag) {
IsCheckFlag = true;
$("#tt").datagrid("unselectRow", rowIndex);
}
},
onUnselect: function (rowIndex, rowData) {
if (!IsCheckFlag) {
IsCheckFlag = true;
$("#tt").datagrid("selectRow", rowIndex);
}
}
}); var p = $('#tt').datagrid('getPager');
$(p).pagination({
/*
页数文本框前显示的汉字 修改每页默认条数
搜索pageList在jquery.easyui.min.js中修改,
分页区下拉分页数量集合和默认每页分页条数
striped属性 交替行换色
*/
beforePageText: '第',
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from}-{to} 条记录,共 {total} 条记录'
});
}); //搜索
function doSearch() {
$('#tt').datagrid('load', {
dname: $('#d_name').val(),
delse: $('#d_else').val()
});
}; //导出
function doExport() {
var models = [];
var rows = $('#tt').datagrid('getChecked');
for (var i = 0; i < rows.length; i++) {
models.push(rows[i].d_id);
}
alert(models.join(','));
} //新增
function doAdd() {
alert("新增");
} //格式化列数据
function formatPrice(val, row, index) {
if (row.d_amount < 1010) {
return '<span style="color:red;">' + val + '</span>';
} else {
return val;
}
} //自定义操作列
function formatOper(val, row, index) {
var str = "";
str += '<a href="javascript:void(0);" onclick="doEdit(' + row.d_id + ')">修改</a>';
str += ' ';
str += '<a href="javascript:void(0);" onclick="doDelete(' + row.d_id + ')">删除</a>';
return str;
}
//编辑
function doEdit(id) {
alert(id);
}
//删除
function doDelete(id) {
alert(id);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tt">
<thead>
<tr>
<th field="ck" width="100" align="center" checkbox="true"></th>
<th field="d_id" width="100" align="center">编号</th>
<th field="d_name" width="100" align="center" sortable="true">用户名</th>
<th field="d_password" width="100" align="center" sortable="true">用户密码</th>
<th field="d_else" width="100" align="center" sortable="true">备注信息</th>
<th field="d_amount" width="100" align="center" sortable="true" formatter="formatPrice">账户余额</th>
<th field="_operate" width="100" align="center" formatter="formatOper">操作</th>
</tr>
</thead>
</table>
</div> <!--查询区域-->
<div id="tb" style="padding: 3px">
<span>用户名:</span>
<input id="d_name" style="line-height: 26px; border: 1px solid #ccc" />
<span>备注信息:</span>
<input id="d_else" style="line-height: 26px; border: 1px solid #ccc" />
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="doSearch()">查询</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="doAdd()">新增</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="doExport()">批量删除</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-export'" onclick="doExport()">导出选中</a>
</div>
</form>
</body>
</html>
<%@ WebHandler Language="C#" Class="EasyUIHandler" %> using System;
using System.Web;
using System.Collections.Generic;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Data;
using System.Data.SqlClient; public class EasyUIHandler : IHttpHandler { public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int pageIndex = MSCL.RequestHelper.GetInt("page", 0); //当前页码
int pageSize = MSCL.RequestHelper.GetInt("rows", 0); //每页显示记录数
string method = MSCL.RequestHelper.GetString("method");//前台传的标示值 string JsonStr = string.Empty;
try
{
switch (method)
{
//查询数据
case "query":
string dname = MSCL.RequestHelper.GetString("dname");
string delse = MSCL.RequestHelper.GetString("delse"); string sort = MSCL.RequestHelper.GetString("sort"); //排序字段名。
string order = MSCL.RequestHelper.GetString("order"); //排序方式
string where = string.Empty;
where += string.IsNullOrWhiteSpace(dname) ? "" : " And d_name like '%" + dname + "%' ";
where += string.IsNullOrWhiteSpace(delse) ? "" : " And d_else like '%" + delse + "%' ";
JsonStr = QueryData(pageIndex, pageSize, where, sort, order);
break;
default:
break;
}
}
catch (Exception ex)
{
throw;
}
context.Response.Write(JsonStr);
context.Response.End();
} #region
/// <summary>
/// 查询数据
/// </summary>
/// <param name="pageIndex">当前页码</param>
/// <param name="pageSize">每页记录数</param>
/// <param name="where">查询条件</param>
/// <param name="orderField">排序字段</param>
/// <param name="order">排序方式 asc或desc</param>
/// <returns></returns>
protected string QueryData(int pageIndex, int pageSize, string where,string orderField,string order)
{
int totalRecord = 0;
int TotalPage = 0;
string orderStr = string.IsNullOrWhiteSpace(orderField) ? "d_id asc" : string.Format("{0} {1}", orderField, order);
DataTable dt = MSCL.PagingHelper.QueryPagingMssql("TestTable", "*", orderStr, pageIndex, pageSize, where, out totalRecord, out TotalPage);
PageData data = new PageData();
data.total = totalRecord;
List<JObject> list = new List<JObject>();
foreach (DataRow item in dt.Rows)
{
JObject obj = new JObject();
obj.Add("d_id", item["d_id"].ToString());
obj.Add("d_name", item["d_name"].ToString());
obj.Add("d_password", item["d_password"].ToString());
obj.Add("d_else", item["d_else"].ToString());
obj.Add("d_amount", item["d_amount"].ToString());
list.Add(obj);
}
data.rows = list;
return JsonConvert.SerializeObject(data);
}
#endregion public bool IsReusable {
get {
return false;
}
} public class PageData
{
public int total;
public List<JObject> rows;
} }
$('#ddlFather').combotree('loadData',@Html.Raw(ViewBag.Level));
$("#ddlFather").combotree('setValue','@ViewBag.FatherId');//默认选中
var t = $('#ddlFather').combotree('tree'); // 得到树对象
var a = t.tree('getSelected').id; //取值
var b = t.tree('getSelected').text; //取值 $('#ddlRole').combobox({
data: @Html.Raw(ViewBag.RoleData),
valueField:'GroupID',
textField:'GroupName',
onChange : function(){
var value = $(this).combobox('getValue');
$("#roleId").val(value);
//console.log(value);
$.ajax({
url: '@Url.Action("GetRole", "Home")',
data: {"roleId": value },
type: 'GET',
timeout: 1000,
cache: false,
success: function(data){
setCheckbox(data)
}
})
}
});
var a = $("#ddlRole").combobox('getValue'); //取值
var a = $("#ddlRole").combobox('getText'); //取文字 $("#resourcelist").treegrid({
title: "权限分配",
url: '@Url.Action("GetResourceTree", "Home")',
idField: 'moduleid',
treeField: 'module_name',
//rownumbers: true, //行号
toolbar: '#tb',
fitColumns: true,//自动适应。先给列随便加个宽度
border: false
}); <table id="resourcelist">
<thead>
<tr>
<th data-options="field:'moduleid',width:40">资源编号</th>
<th data-options="field:'module_name',width:150">资源名称</th>
<th data-options="field:'actions',width:200,formatter:formatOpAction">操作</th>
</tr>
</thead>
</table>
<input id="ddlRole" class="easyui-combobox" style="width:200px" />
EasyUI DataGrid使用示例的更多相关文章
- 实现easyui datagrid在没有数据时显示相关提示内容
本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...
- Jquery easyui datagrid 导出Excel
From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...
- 对easyui datagrid组件的一个小改进
#对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...
- easyui datagrid单击单元格选择此列
示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格.可以配置全局single变量, ...
- (转)easyui datagrid 部分参数说明
easyui datagrid 部分参数 数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称 类型 描述 默认值 columns array 数 ...
- DataTables VS EasyUI DataGrid 基础应用 转
DataTables中文网推出了 第一篇 关于DataTables和其他表格插件比较后,为了把让这个比较更有意义,更能帮助到大家,DataTables中文网 做了问卷调查,根据小伙伴们的填写我归纳了一 ...
- easyui datagrid 禁止选中行 EF的增删改查(转载) C# 获取用户IP地址(转载) MVC EF 执行SQL语句(转载) 在EF中执行SQL语句(转载) EF中使用SQL语句或存储过程 .net MVC使用Session验证用户登录 PowerDesigner 参照完整性约束(转载)
easyui datagrid 禁止选中行 没有找到可以直接禁止的属性,但是找到两个间接禁止的方式. 方式一: //onClickRow: function (rowIndex, rowData) ...
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
随机推荐
- POJ 3463 最(次)短路条数
Sightseeing Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9497 Accepted: 3340 Descr ...
- 误删libc.os.6共享库的解决办法
在我们使用系统的过程中,要注意各个共享库的使用,万一不小心删掉了什么,就可能出现各种问题.如果你把libc.os.6删掉了,那可就悲剧了,因为你的大部分命令都不能够正常使用了(╥╯^╰╥) 接下来呢, ...
- 团队作业7---Alpha冲刺值事后诸葛
一.设想和目标 1.我们的软件要解决什么问题? 解决教师和助教对实验报告查重的问题,拥有两个用户:1.教师或助教:查看学生实验报告的重复率:4.学生:上传实验报告. 2.是否定义得很清楚?是否对典型用 ...
- 【Alpha阶段】第六次scrum meeting
一.会议照片 二.会议内容 姓名 学号 负责模块 昨日任务完成度 今日任务 杨爱清 099 界面设计和交互功能 完成 设计界面 杨立鑫 100 数据库搭建和其他 完成 将数据库与其他模块连接 林 钊 ...
- Java程序设计第五周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 2. 书面作业 **代码阅读:Child压缩包内源代码 Child.java源代 ...
- 201521123096《Java程序设计》第十二周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
- 多线程面试题系列(3):原子操作 Interlocked系列函数
上一篇中讲到一个多线程报数功能.为了描述方便和代码简洁起见,我们可以只输出最后的报数结果来观察程序是否运行出错.这也非常类似于统计一个网站每天有多少用户登录,每个用户登录用一个线程模拟,线程运行时会将 ...
- maven使用私服以后,Missing artifact xxx:xxx:jar:xx的问题
这里提供的是一种针对特殊情况的的解决方案. 即在你可以顺利使用本地仓库时,在settings.xml中加上私服配置以后出现这样的问题. 解决方案: windows→preferences→Maven→ ...
- Data_Struct(LinkList)
最近在学数据结构,学到链表这节作业有链表,毕竟菜鸟代码基本照看书上算法写的,再加上自己的小修改,这里先记录下来,万一哪天想看了,来看看. 里面有用到二级指针,还是不太理解,还有就是注释不多,后续有了更 ...
- Python里Pure paths、PurePosixPath、PureWindowsPath的区别
Python是跨平台的,可以在不同的操作系统上运行.但是不同系统上路径 的表示方式是不一样的. 例如windows上路径使用“\”分割子目录和父目录,linux上是使用“/”来分割.这就是PurePo ...