> 博客详情
$.extend($.fn.datagrid.methods, {
addEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item.field);
e.editor = item.
var e = $(jq).datagrid('getColumnOption', param.field);
e.editor = param.
removeEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item);
e.editor = {};
var e = $(jq).datagrid('getColumnOption', param);
e.editor = {};
使用方式：
为password字段添加一个editor
$("#gridId").datagrid('addEditor', {
field : 'password',
editor : {
type : 'validatebox',
options : {
required : true
删除password的editor
$("#gridid").datagrid('removeEditor', 'password');
注：两个方法，第二个参数都可以传递数组。
人打赏支持
开源项目作者
领取时间：
作为一个开源项目作者，是时候站出来拯救世界了！
领取条件：开源项目被开源中国收录的开发者可领取
参与源创会
领取时间：
“”在线下联结了各位 OSCer，推广开源项目和理念，很荣幸有你的参与~
领取条件：参与过开源中国“源创会”的 OSCer 可以领取
码字总数 2227
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥jQuery EasyUI 教程
jQuery EasyUI 数据网格 - 扩展编辑器
一些常见的编辑器（editor）添加到数据网格（datagrid），以便用户编辑数据。
所有的编辑器（editor）都定义在 $.fn.datagrid.defaults.editors 对象中，这个可以继承扩展以便支持新的编辑器（editor）。
本教程将向您展示如何添加一个新的 numberspinner 编辑器到数据网格（datagrid）。
继承扩展 numberspinner 编辑器
$.extend($.fn.datagrid.defaults.editors, {
numberspinner: {
init: function(container, options){
var input = $('&input type="text"&').appendTo(container);
return input.numberspinner(options);
destroy: function(target){
$(target).numberspinner('destroy');
getValue: function(target){
return $(target).numberspinner('getValue');
setValue: function(target, value){
$(target).numberspinner('setValue',value);
resize: function(target, width){
$(target).numberspinner('resize',width);
在 html 标记中创建数据网格（DataGrid）
&table id="tt" style="width:600height:250px"
url="data/datagrid_data.json" title="Editable DataGrid" iconCls="icon-edit"
singleSelect="true" idField="itemid" fitColumns="true"&
&th field="itemid" width="60"&Item ID&/th&
&th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}"&List Price&/th&
&th field="unitcost" width="80" align="right" editor="numberspinner"&Unit Cost&/th&
&th field="attr1" width="180" editor="text"&Attribute&/th&
&th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}"&Status&/th&
&th field="action" width="80" align="center" formatter="formatAction"&Action&/th&
我们分配 numberspinner 编辑器到 'unit cost' 字段。
当开始编辑一行，用户可以通过 numberspinner 编辑器来编辑数据。
下载 jQuery EasyUI 实例
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码jQuery EasyUI之DataGrid使用实例详解
作者：guwei4037
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jQuery EasyUI之DataGrid使用实例
jQuery EasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。
jQuery EasyUI框架的官方主页,可以下载完整开发包，里面有示例代码可以参考。
运行效果图：
由于我使用的是ASP.NET webform技术，下面我就贴出主要的代码以供参考。
在页面中首先要引用相关的css以及js文件，这样才能使用该组件。
&link href="../Js/jQueryEasyUI/theme/default/easyui.css" rel="stylesheet" type="text/css" /&
&link href="../Js/jQueryEasyUI/theme/icon.css" rel="stylesheet" type="text/css" /&
&link rel="stylesheet" type="text/css" href="../Css/datagrid.css" /&
&script src="../Js/jQueryEasyUI/jquery-1.7.1.min.js" type="text/javascript"&&/script&
&script src="../Js/jQueryEasyUI/jquery.easyui.min.js" type="text/javascript"&&/script&
&script src="../Js/jQueryEasyUI/jquery.pagination.js" type="text/javascript"&&/script&
由于jQuery EasyUI基于jQuery，所以必需要先引入jQuery文件。而pagination.js是EasyUI的分页插件，后面会看到分页的效果。
&script type="text/javascript"&
$(function () {
var qParams = { mode: 'Query', hfjia: $("#&%=hfjia.ClientID %&").val(), sfz: $("#sfz").val() }; //取得查询参数
var oldRowI
var opt = $("#grid");
opt.datagrid({
width: '780',
height: '440',
nowrap: false,
striped: true,
fitColumns: true,
singleSelect: true,
queryParams: qParams, //参数
url: '../Service/ServiceHanlder.ashx',
//idField: 'id', //主索引
//frozenColumns: [[{ field: 'ck', checkbox: true}]],
pageSize: 20,
pageList: [20, 25, 30],
pagination: true, //是否启用分页
rownumbers: true, //是否显示列数
onClickRow: function (rowIndex) {
if (oldRowIndex == rowIndex) {
opt.datagrid('clearSelections', oldRowIndex);
var selectRow = opt.datagrid('getSelected');
oldRowIndex = opt.datagrid('getRowIndex', selectRow);
columns: [[
title: "浏览档案", width: 20, align: "center", formatter: function (value, rowData, rowIndex) {
return "&font onclick=searchDA('" + rowData.PersonIdNum + "'); color='blue' & 查看档案 &/font&";
{ field: 'DAGInPosition', title: "档案位置", width: 40, align: "center" },
{ field: 'PersonIdNum', title: "身份证号", width: 80, align: "center" },
{ field: 'PersonName', title: "姓名", width: 40, align: "center" },
{ field: 'PersonSex', title: "性别", width: 30, align: "center" },
{ field: 'DAId', title: "档案编号", width: 60, align: "center" }
{ field: 'DAGInOrg', title: "业务经办机构", width: 60, align: "center" }
}).datagrid("getPager").pagination({
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页/{pages}页',
displayMsg: '共{total}条记录',
onBeforeRefresh: function () {
请注意这段长长的js代码，这是该页面的核心代码。里面的参数设置请注意，主要就是通过js动态的构造datagird。
该页面的Body部分：
&form id="form1" runat="server"&
&asp:HiddenField ID="hfjia" runat="server" /&
&div class="form-wrapper cf" style="margin-top: 10"&
&div align="center" style="width: 780"&
&input id="sfz" runat="server" type="text" placeholder="请扫描档案袋上面的条形码..." /&
&button id="ssss"&
档案查询&/button&
&div style="float: width: 780 margin-top: -40 margin-left: 10"&
&table id="grid"&
&div style="float: margin-top: 10 margin-left: 10"&
&input type="button" value="返回主菜单" id="button1s" onclick="javascript: window.location.href = '../Main.aspx'" /&
&其中id为grid的table部分，与上面的js部分中grid对应。
该页面的后台代码部分：
protected void Page_Load(object sender, EventArgs e)
string dagid = Request.QueryString["dagid"];
hfjia.Value =
很简单就是给前台存放的一个隐藏域赋值，以在页面刷新时保持状态（记录档案架的位置）。
后台的数据源地址为ServiceHanlder.ashx，看看这里面的详细代码。
namespace DAMIS.Pad2.Service
/// &summary&
/// ServiceHanlder 的摘要说明
/// &/summary&
public class ServiceHanlder : IHttpHandler
public void ProcessRequest(HttpContext context)
if (!string.IsNullOrEmpty(context.Request["mode"]))
if (context.Request["mode"].Equals("Query"))
if (!string.IsNullOrEmpty(context.Request["sfz"]))
string sfz = context.Request["sfz"];
UserInfo userInfo = GetUserInfoById(sfz);
if (userInfo != null)
ReturnData rd = new ReturnData();
rd.total = 1;
rd.rows = new List&UserInfo&() { userInfo };
DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType());
json.WriteObject(context.Response.OutputStream, rd);
context.Response.Write("&script&alert('查无此人');&/script&");
string hfjia = Regex.Match(context.Request["hfjia"].Split(';')[0], @"\d+").V
string page = context.Request["page"];
string rows = context.Request["rows"];
QueryData(hfjia, page, rows, context);
if (context.Request["mode"].Equals("QueryInner"))
string dajid = context.Request["dajid"].Trim('\'');
string dagid = context.Request["dagid"];
string hfjia = string.Join("-", dajid, dagid);
string page = context.Request["page"];
string rows = context.Request["rows"];
QueryData(hfjia, page, rows, context);
#region 查询档案（分页）
/// &summary&
/// 查询档案（分页）
/// &/summary&
/// &param name="hfjia"&架号&/param&
/// &param name="page"&页数&/param&
/// &param name="rows"&行数&/param&
/// &param name="context"&&/param&
public void QueryData(string hfjia, string page, string rows, HttpContext context)
List&UserInfo& list = new List&UserInfo&();
string msg = string.E
DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, out msg);
foreach (DataRow dr in dt.Rows)
list.Add(new UserInfo()
PersonIdNum = dr["PersonIdNum"].ToString(),
PersonName = dr["PersonName"].ToString(),
PersonSex = dr["PersonSex"].ToString(),
DAId = dr["DAId"].ToString(),
DABusKindName = dr["DABusKindName"].ToString(),
DAKindName = dr["DAKindName"].ToString(),
DALevelCodeName = dr["DALevelCodeName"].ToString(),
DAGInPosition = dr["DAGInPosition"].ToString(),
DAGInUserId = dr["DAGInUserId"].ToString(),
DAGInOrg = dr["DAGInOrg"].ToString(),
IsValid = dr["IsValid"].ToString(),
list = list.OrderBy(x =& x.DAGInPosition).ToList();
ReturnData rd = new ReturnData();
rd.total = dt.Rows.C
rd.rows = list.Where(x =& x.IsValid == "0").Skip(Convert.ToInt32(rows) * (Convert.ToInt32(page) - 1)).Take(Convert.ToInt32(rows)).ToList();
DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType());
json.WriteObject(context.Response.OutputStream, rd);
#endregion
#region 通过身份证号获取用户基本信息
/// &summary&
/// 通过身份证号获取用户基本信息
/// &/summary&
/// &param name="id"&身份证号&/param&
/// &returns&&/returns&
public static UserInfo GetUserInfoById(string id)
string hfjia = CommonBLL.GetUserPositionById(id);
string msg = string.E
if (!string.IsNullOrEmpty(hfjia))
hfjia = hfjia.Split('-')[0] + "-" + hfjia.Split('-')[1];
DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, out msg);
if (dt != null && dt.Rows.Count & 0)
DataRow dr = dt.Select("personidnum = '" + id + "'").FirstOrDefault();
UserInfo userInfo = new UserInfo()
PersonIdNum = dr["PersonIdNum"].ToString(),
PersonName = dr["PersonName"].ToString(),
PersonSex = dr["PersonSex"].ToString(),
DAId = dr["DAId"].ToString(),
DABusKindName = dr["DABusKindName"].ToString(),
DAKindName = dr["DAKindName"].ToString(),
DALevelCodeName = dr["DALevelCodeName"].ToString(),
DAGInPosition = dr["DAGInPosition"].ToString(),
DAGInUserId = dr["DAGInUserId"].ToString(),
DAGInOrg = dr["DAGInOrg"].ToString(),
IsValid = dr["IsValid"].ToString(),
return userI
#endregion
public bool IsReusable
这里面也没什么好说的，就是为前端页面提供数据。代码完全可以进一步精简、处理，这里就不修正了。
里面用到的一个实体类：
/// &summary&
/// 分页返回数据
/// &/summary&
public class ReturnData
/// &summary&
/// 数据总数
/// &/summary&
public int total { }
/// &summary&
/// 具体数据
/// &/summary&
public List&UserInfo& rows { }
以上就是jQuery EasyUI之DataGrid使用实例简单介绍，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具