<%@ 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", "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',40">资源编号</th> <th data-options="field:'module_name',150">资源名称</th> <th data-options="field:'actions',200,formatter:formatOpAction">操作</th> </tr> </thead> </table> <input id="ddlRole" class="easyui-combobox" style="200px" />