·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> easyui之datagrid的使用

【如有意向点此提交需求】关于我们

easyui之datagrid的使用

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

easyui之datagrid的使用

一、神马是easyui

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对CSS样式有深入的了解，开发者需要了解的只有一些简单的html标签。jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，validatebox，window等等。下载地址：http://pan.baidu.com/s/1eQgm9fc二、目录说明三、搭建环境引入：<script src="../easyui/jquery-1.8.0.min.js"></script><script src="../easyui/jquery.easyui.min.js"></script><link href="../easyui/themes/default/easyui.css" rel="stylesheet" />四、datagrid的使用先上效果：布局用easyui里面的layout做的数据加载实现方法：
  1 //页面加载初始化  2 $(function () {  3     GetUserList(GetSqlWhere());  4 });  5   6 //获取查询条件  7 function GetSqlWhere() {  8     var strWhere = "1=1";  9     var username = $.trim($("#stxtUserName").val()); 10     var phase = $("#ssPhase").val(); 11     if (username != "") { 12         strWhere += " and UserName='" + username + "'"; 13     } 14     if (phase != "0") { 15         strWhere += " and Phase='" + phase + "'"; 16     } 17     return strWhere; 18 } 19  20 //获取用户列表 21 function GetUserList(strWhere) { 22     $("#dg").datagrid({ 23         url: "Ajax/UserMAjax.ashx", 24         queryParams://每次请求的参数 25             { 26                 cmd: 'list', 27                 strWhere: strWhere 28             }, 29         pagination: true,//允许分页 30         rownumbers: true,//行号 31         singleSelect: false,//只选择一行 32         pageSize: 15,//每一页数据数量 33         checkOnSelect: false, 34         pageList: [5, 10, 15, 20, 25], 35         columns: [[{ 36             field: 'id', 37             checkbox: true, 38         }, 39         { 40             field: "UserId", 41             title: "用户ID", 42             align: "center", 43             width: 50 44         }, { 45             field: "RealName", 46             title: "学生姓名", 47             align: "center", 48             width: 100 49         }, { 50             field: "ClassId", 51             title: "学生类型", 52             align: "center", 53             width: 100, 54             formatter: function (val, row) { 55                 if (val == 1) { 56                     return ".NET学员"; 57                 } 58                 else if (val == 2) { 59                     return "JAVA学员"; 60                 } 61             } 62         }, { 63             field: "UserName", 64             title: "用户名", 65             align: "center", 66             width: 100 67         }, { 68             field: "Pwd", 69             title: "密码", 70             align: "center", 71             width: 100 72         }, { 73             field: "PhoneNum", 74             title: "电话号码", 75             align: "center", 76             width: 100 77         } 78         , { 79             field: "Sex", 80             title: "性别", 81             align: "center", 82             width: 50 83         }, { 84             field: "Phase", 85             title: "班级", 86             align: "center", 87             width: 130 88         }, { 89             field: "QQ", 90             title: "QQ", 91             align: "center", 92             width: 100 93         }, { 94             field: "UserType", 95             title: "权限身份", 96             align: "center", 97             width: 120, 98             formatter: function (val, row) { 99                 if (val == 1) {100                     return "管理员";101                 }102                 else if (val == 2) {103                     return "讲师";104                 }105                 else if (val == 3) {106                     return "正式学员";107                 }108                 else if (val == 4) {109                     return "咨询者";//下午05，57分钟110                 }111             }112         }, {113             field: "HeadPic",114             title: "头像地址",115             align: "center",116         }, {117             field: "ClientIP",118             title: "注册IP",119             align: "center",120             width: 100121         }, {122             field: "CreatedTime",123             title: "注册时间",124             align: "center",125             width: 100,126             formatter: function (val, row) {127                 var str1 = val.indexOf("(")128                 var str2 = val.lastIndexOf(")");129                 var dateValue = val.substring(str1 + 1, str2);130                 var date = new Date(parseInt(dateValue));131                 return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();132             }133 134         }, {135             field: "Message",136             title: "留言",137             align: "center"138 139         }140         ]],141 142         //点击每一行的时候触发143         //onClickRow: function (rowIndex, rowData) {144         //    alert(rowData["UserId"]);145         //}146     });147 }
View Code

查找：

function SelUser() {    var s = GetSqlWhere();    GetUserList(s);}
View Code

添加：

function SaveUser() {    $('#fm').form('submit', {        url: "ajax/UserMAjax.ashx?cmd=add",        success: function (data) {            var data = eval('(' + data + ')');  // change the JSON string to Javascript object                if (data.rbool) {                window.location.reload();            }            else {                $.messager.alert('提示', data.infor);            }        }    });}
View Code

编辑：

function EditUser() {    $('#fm').form('submit', {        url: "ajax/UserMAjax.ashx?cmd=edit&userid=" + userid,        success: function (data) {            var data = eval('(' + data + ')');  // change the JSON string to javascript object                if (data.rbool) {                window.location.reload();            }            else {                $.messager.alert('提示', data.infor);            }        }    });}
View Code

UserMAjax.ashx 页面内容：

  1   public class UserMAjax : IHttpHandler  2     {  3