第一步:引用 <script type="text/javascript" src="/js/easyui.js"></script>和 <script type="text/javascript" src="/js/easyui-lang-zh_CN.js"></script>,下载地址http://download.csdn.net/detail/wu_jian_xiong/7610585也可以在我的博客中下载
第二步:写代码 function LoadGrid() {
///需要传到后台的值
var xian = $("#drop_xian option:selected ").text() == "县" ? "" : $("#drop_xian option:selected ").text();
var Meet_MN = "";
if ($("#Drop_Name option:selected ").text() == "会议") {
Meet_MN = $("#txt_meet").val();
}
//datas是一个<table>标签或则<div>标签
$('#datas').datagrid({
url: '/AjaxSource/xxx.ashx',/url:是需要传输数据的地址,这个也可以是Json
//下面4行是datagrid的属性,这些属性可以在http://www.cnblogs.com/Philoo/archive/2011/11/16/jeasyui_api_datagrid.html查看
rownumbers: true,
fitColumns: true, pageList: [5, 10, 15],
pagination: true, striped: false,
height: ($(window).height() * 0.90),
///queryParams 传输数据,opt读取的标记,值为Msearch
queryParams: { "opt": "Msearch", "meet": encodeURI(Meet_MN),
"Xian": encodeURI(xian),"sortOrder": "desc"//倒叙排列
},
columns: [[
{ field: 'ck1', checkbox: true },//选择功能
{ field: 'ID', title: '编号', width: 16, align: 'center', sortable: true },//根据ID 排序
// { field: 'tu', title: '图', width: 30, align: 'center',
// formatter: function (v, r, i) {
// var s = ".." + r.ADURL;
// if (s != "..") {
// return "<img ID='IgMeet_ADURL' Width='100px' height='25px' src='" + s + "' style='cursor:pointer' alt='广告图' οnclick='practice(" + r.ID + ")'/>";
// }
// return "";
// }
// },
{field: 'MeetName', title: '会议', width: 50, align: 'center',
formatter: function (v, r, i) {
var meetname = r.MeetName;
if (meetname.length > 9) {
meetname = meetname.substring(0, 9) + "...";
return "<table style='width='100%'><tr><td ><a target='_blank' style='TEXT-DECORATION:none; float: left' >" + meetname + "</a></d></tr></table>";
}
else if (meetname.length == 0) {
return " <table style='width='100%'><tr><td ><a target='_blank' style='TEXT-DECORATION:none; float: left' >未填</a></d></tr></table>"; //
}
else {
return " <table style='width='100%'><tr><td ><a target='_blank' style='TEXT-DECORATION:none; float: left' >" + r.MeetName + "</a></d></tr></table>"; //
}
}
},
{ field: 'Meet_Name', title: '会场', width: 50, align: 'center',
formatter: function (v, r, i) {
var meetname = r.Meet_Name;
if (meetname.length > 9) {
meetname = meetname.substring(0, 9) + "...";
return "<table style='width='100%'><tr><td ><a target='_blank' style='TEXT-DECORATION:none; float: left' >" + meetname + "</a></d></tr></table>";
}
else if (meetname.length == 0) {
return " <table style='width='100%'><tr><td ><a target='_blank' style='TEXT-DECORATION:none; float: left' >未填</a></d></tr></table>"; //
}
else {
return " <table style='width='100%'><tr><td ><a target='_blank' style='TEXT-DECORATION:none; float: left' >" + r.Meet_Name + "</a></d></tr></table>"; //
}
}
},
{ field: 'Sheng', title: '省', width: 20, align: 'center' },
{ field: 'Shi', title: '市', width: 20, align: 'center',
formatter: function (v, r, i) {
var shi = r.Shi;
if (shi.length > 4) {
shi = shi.substring(0, 4) + "..";
return "<a target='_blank' style='TEXT-DECORATION:none' >" + shi + "</a>";
}
else if (shi.length == 0) {
return "<a target='_blank' style='TEXT-DECORATION:none' >未填写</a>";
}
else {
return "<a target='_blank' style='TEXT-DECORATION:none' >" + r.Shi + "</a>";
}
}
},
{ field: 'StartDate', title: '开始', width: 29, align: 'center',
formatter: function (value) {
if (value != null && value != '') {
if (value.indexOf('/') > 0) {
value = value.replace("/", "-");
}
if (value.indexOf('/') > 0) {
value = value.replace("/", "-");
}
return '<span title="' + TUJS.FormatDate(value, "quan") + '">' + TUJS.FormatDate(value, "NALL") + '</span>';
} else { return '--'; }
}
},
{field: 'HWJL', title: '会务经理', width: 30, align: 'center' },
{ field: 'HWJLMobile', title: '手机', width: 32, align: 'center' },
{ field: 'BMDocUrl', title: '报名表下载地址', width: 60, align: 'center',
formatter: function (v, r, i) {
var BMDocUrl = r.BMDocUrl;
return "<a target='_blank' style='TEXT-DECORATION:none' href='" + BMDocUrl + "'>" + BMDocUrl + "</a>";
}
},
{ field: 'order', title: '修改', width: 0, aliSSgn: 'center',
formatter: function (v, r, i) {
return "<img src='/icon/option.gif' style='cursor:pointer' οnclick='Update(" + r.ID + ")'/>";
}
},
//判断时间是否在当天以后
{ field: 'up', title: '预定', width: 0, aliSSgn: 'center',
formatter: function (v, r, i) {
if (r.StartDate == null || r.StartDate == "") {
return "--";
}
var myDate = new Date();
var month = myDate.getMonth() + 1;
var date = myDate.getFullYear() + "/" + month + "/" + myDate.getDate() + " " + myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();
Date.prototype.diff = function (date) {
var star = parseInt((this.getTime() - date.getTime()) / (60 * 60 * 1000));
return star;
}
var dateA = new Date(r.StartDate);
var dateC = new Date(date);
var a = dateC.diff(dateA);
if (a <= 0) {
return "<img src='/images/yuding.gif' style='cursor:pointer' οnclick='Order(" + r.ID + ",\"" + r.MeetName + "\")'/>";
}
else {
return "--";
}
}
},
{ field: 'del', title: '删除', width: 0, align: 'center',
formatter: function (v, r, i) {
return "<img src='/icon/del.gif' style='cursor:pointer' οnclick='Del(" + r.ID + ")'>";
}
}
]],
onSortColumn: function (sortname, order) {
Sorts('datas', sortname, order);
},
onLoadSuccess: function (data) {
},
onLoadErrir: function (data) {
},
onDblClickRow: function (rowIndex, rowData) {
seek(rowData.ID);//双击触发查看事件,可以不要
}
});
}
//排序
function Sorts(datagridID, sortName, sortOrder) {
var params = $('#' + datagridID).datagrid('options').queryParams;
params.sortName = sortName;
params.sortOrder = sortOrder;
$("#" + datagridID).datagrid('reload');
}
///批量删除
function Dels() {
var json = $('#datas').datagrid('getSelections'); var ids = ""
if (json.length > 0) {
$.each(json, function (i, n) {
ids += n.ID + ",";
});
} else { return; };
if (ids.length > 0) {
Del(ids.substring(0, ids.length - 1));
}
}
//删除
function Del(id) {
var del = "删除";
$.messager.confirm("删除", "确定删除么?", function (r) {
if (r) {
$.ajax({
type: 'POST', url: xxx.aspx?id=' + id + "&del=" + del,
success: function (data) {
var da = data;
var a = new Array();
a = da.split('<!');
if (a[0].toString().trim() == "1") {
Shows("温馨提示", "成功!", "slide", 5000);
LoadGrid();
}
else if (a[0].toString().trim() == "2") {
Shows("温馨提示", "还有订单存在,操作失败!", "slide", 5000);
}
else {
Shows("温馨提示", "失败", "slide", 5000);
}
}
});
}
});
}
第三部:AjaxSource/xxx.ashx后台代码
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string opt = Decode("opt");
switch (opt)
{
case "Msearch":
rs = Mbin();
break;}
context.Response.Write(rs);
context.Response.Write(rs);
}
private string Mbin()
{
rs="";
DataTable dt = ;//后天直接用数据库查询语言,查出数据,再放到DataTable里面。
OPDTorJSON op = new OPDTorJSON();
rs = op.ToJsonString(dt, counts);//返回的这个counts为数据库查询的条数,这个自己写
}
catch { }
return rs;
}