<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水电表管理</title>
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/wrap/jquery.easyui.min.js"></script>
<script src="/scripts/wrap/locale/easyui-lang-zh_CN.js"></script>
<script src="/Scripts/datasrvrequest.js"></script>
<script src="/Scripts/json2.js"></script>
<link href="/Scripts/wrap/themes/icon.css" rel="stylesheet" />
<link href="/scripts/wrap/themes/default/easyui.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">
var editIndex = undefined;
function grid_load_callback(data, status) {
//alert(JSON2.stringify(data));
$("#dg").datagrid("loadData", data);
}
function grid_load(pageindex, pagesize) {
if (pageindex == null)
pageindex = 1;
if (pagesize == null)
pagesize = 20;
var ph = new parmHelper();
var logun = $.request("userno");
var name = $.getValue("txtname");
var no = $.getValue("txtno");
var type = $.getlistValue("ddltype");
ph.Add("userno", logun);
ph.Add("no", no);
ph.Add("name", name);
ph.Add("type", type);
ph.Add("sortfields", "");
ph.Add("pagesize", pagesize);
ph.Add("pageindex", pageindex);
var p = JSON2.stringify(ph.KeyValueArray);
retrieveJsonData(DCAConfig.MWPGetDSJsonUrl, p, DCAConfig.mwpmeterpagerread, grid_load_callback);//405576483
}
function btnsearch_click() {
//获取下拉列表框的值方法：$(‘#alarmlogdisplay‘).datagrid(‘getPager‘).data("pagination").options.pageSize;
//如果要获取当前的页，只需要把pageSize 改变为pageNumber即可。要获取其他属性，只需要改变pageSize为相应的属性即可。
var pagesize = $.getJquery("dg").datagrid(‘getPager‘).data("pagination").options.pageSize;
var pageindex = $.getJquery("dg").datagrid(‘getPager‘).data("pagination").options.pageNumber
grid_load(pageindex, pagesize);
}
function callback_w(data, status) {
if (data[0].tcount > 0)
$.showInfoMsg(data[0].msg);
else
$.showErrorMsg(data[0].msg);
}
function initGrid(grid) {
getjquery(‘dg‘).datagrid({
//title: ‘CheckBox Selection on DataGrid‘,
url: ‘‘,
width: 700,
rownumbers: true,
idField: ‘no‘,
pageList: [10, 30],
columns: [[
{ field: ‘rowid‘, checkbox: true },
{ field: ‘name‘, title: ‘名称‘, formatter: function (value, row) { return ‘<span title="‘ + value + ‘" class="easyui-tooltip">‘ + value + ‘</span>‘; } },
{ field: ‘no‘, title: ‘编号‘, editor: { "type": "text", "options": { readonly: "true" } }, formatter: function (value, row) { var rstr = ‘<span title="‘ + value + ‘" class="easyui-tooltip"‘; if (value.length < 4) rstr += ‘ style="color:black;"‘; rstr += ‘>‘ + value + ‘</span>‘; return rstr; } },
{ field: ‘type‘, title: ‘类别‘, formatter: function (value, row) { var rstr = ‘<span title="‘ + value + ‘" class="easyui-tooltip"‘; if (value == ‘电表‘) rstr += ‘ style="color:red"‘; rstr += ‘>‘ + value + ‘</span>‘; return rstr; } },
{ field: ‘desr‘, title: ‘备注‘, editor: ‘text‘, formatter: function (value, row) { var rstr = ‘<span title="‘ + value + ‘" class="easyui-tooltip"‘; if (value.length < 4) rstr += ‘ style="color:red;width:200px;"‘; rstr += ‘>‘ + value + ‘</span>‘; return rstr; } },
{ field: ‘changetime‘, title: ‘变更时间‘ },
{ field: ‘userno‘, title: ‘维护担当‘ },
{
field: ‘action‘, title: ‘操作‘, width: 70, align: ‘center‘,
formatter: function (value, row, index) {
var no = row.no;
var s = ‘<a href="#" onclick=removeitems("‘ + no + ‘")>删除</a> ‘;
return s;
}
}
]],
fit: true,
singleSelect: false,
//selectOnCheck: false,
//checkOnSelect: false,
striped: true, //行背景交换
nowap: true, //列内容多时自动折至第二行
pagination: true,
rowStyler: function (index, row) {
//if (index%2==0) {
// return ‘color:#fff;‘;
//}
},
//数据加载成功事件
onLoadSuccess: function (data) {
if (data) {
$(‘.easyui-linkbutton2‘).linkbutton({ text: ‘填写完成情况‘, plain: true, iconCls: ‘icon-edit‘ });
$.each(data.rows, function (index, item) {
if (item.checked) {
grid.datagrid(‘checkRow‘, index);
}
});
}
},
onBeforeEdit: function (index, row) {
row.editing = true;
$(‘#dg‘).datagrid(‘selectRow‘, index);
$(‘#dg‘).datagrid(‘refreshRow‘, index);
},
onAfterEdit: function (index, row, changes) {
row.editing = false;
$(‘#dg‘).datagrid(‘refreshRow‘, index);
},
onCancelEdit: function (index, row) {
row.editing = false;
$(‘#dg‘).datagrid(‘refreshRow‘, index);
},
//click行时事件
onClickRow: function (index, rowData) {
},
//双击一行开始编辑
onDblClickRow: function (rowIndex, rowData) {
grid.datagrid(‘beginEdit‘, rowIndex);
//var ed = grid.datagrid(‘getEditor‘, { index: rowIndex, field: ‘username‘ });
//$(ed.target).focus();
}
});
}
//移除选中的
function removeitems(idfields) {
console.log(idfields);
var ph = new parmHelper();
var lg = request("userno");
ph.Add("no", idfields);
ph.Add("flag", 3);
ph.Add("userno", lg);
var parm = JSON2.stringify(ph.KeyValueArray);
postJsonData(DCAConfig.MWPPostJsonUrl, parm, DCAConfig.mwpmeterchange, callback_w);
}
function initGridPager(grid) {
var p = grid.datagrid("getPager");
(p).pagination({
onSelectPage: function (pageNumber, pageSize) {
//alert(‘onSelectPage pageNumber:‘ + pageNumber + ‘,pageSize:‘ + pageSize);
grid_load(pageNumber, pageSize);
} ,
buttons: [
{
iconCls: ‘icon-cut‘,
handler: function () {
var items = getjquery("dg").datagrid("getChecked");
var idfields = "";
$.each(items, function (index, item) {
idfields += item.no + ‘,‘
});
if (idfields.length > 0) idfields = idfields.substring(0, idfields.length - 1);
removeitems(idfields);
}
}] /*,
{
iconCls: ‘icon-cut‘,
handler: function () {
getjquery("win_newdata").window(‘open‘);
}
}, {
iconCls: ‘icon-save‘,
handler: function () {
alert(‘save‘);
}
}]*/
});
}
function bindmetertypelist() {
var data = "[{\"no\":\"-1\",\"name\":\"--请选择--\"},{\"no\":\"1\",\"name\":\"冷水表\"},{\"no\":\"2\",\"name\":\"热水表\"},{\"no\":\"3\",\"name\":\"电表\"}]";
$.loadListData("ddltype", JSON2.parse(data));
$.setlistValue("ddltype","-1")
}
$(function () {
//读取数据
getjquery("btnsearch").bind("click", btnsearch_click);
bindmetertypelist();
EnterEvent.InputEnterEventBind(grid_load);
var grid = getjquery("dg");
//初始化数据显示结构
initGrid(grid);
//初始化分页控件
initGridPager(grid)
//加载数据
btnsearch_click();
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:‘north‘,border:false,title:‘水电表管理‘" style="height: 120px;padding: 10px">
<table class="grid" data-options="fit:true;">
<tr>
<td>编号:</td>
<td>
<input class="text-left easyui-tooltip" data-options="required:true" type="text" value="" id="txtno" title="请输入编号" name="cc" />
</td>
<td>名称:</td>
<td>
<input class="text-left easyui-tooltip" type="text" value="" id="txtname" title="请输入名称" name="cc" />
</td>
<td>类别:</td>
<td>
<input class="easyui-validatebox easyui-combobox" id="ddltype" name="ddltype" style="width:210px;" title="请选择类别" data-options="valueField:‘no‘,textField:‘name‘" />
</td>
</tr>
<tr>
<td colspan="6"><a href="#" id="btnsearch" class="easyui-linkbutton" data-options="iconCls:‘icon-ok‘">查询</a></td>
</tr>
</table>
</div>
<div data-options="region:‘center‘,title:‘检索结果列表‘">
<table id="dg" class="easyui-datagrid"></table>
</div>
</body>
</html>
修改Html Title和表格Title（品红部分）
修改UI元素布局（红色部分）
修改事件绑定和初始化申明代码块（蓝色部分）
修改下拉框绑定初始化实现--静态数据绑定方式（绿色部分）
修改表格数据初始化绑定实现（紫色部分）
（四）Web应用开发---查询Grid显示、行Checkbox、行删除
原文：http://www.cnblogs.com/jeffry/p/5268308.html