Web应用开发---查询Grid显示行编辑
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web应用开发---查询Grid显示行编辑相关的知识，希望对你有一定的参考价值。
- 查询Grid显示、行编辑，UI设计类如
- Copy html代码到新建Html
<!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 ddl_load_callback(data, status) {
$(‘#language‘).combobox(‘loadData‘, data);
}
function grid_load_callback(data, status) {
$("#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 fname = getvalue("txtfaname");
var fno = getvalue("txtfano");
var fcost = getvalue("txtcostcenter");
var flocation = getvalue("txtlocation");
var ftype = getjquery(‘ddltype‘).combobox(‘getValue‘);
var fstatus = getjquery(‘ddlstatus‘).combobox(‘getValue‘);
ph.Add("userno", logun);
ph.Add("fano", fno);
ph.Add("faname", fname);
ph.Add("costcenter", fcost);
ph.Add("location", flocation);
ph.Add("fastatus", fstatus);
ph.Add("fatypes", ftype);
ph.Add("sortfields", "");
ph.Add("pagesize", pagesize);
ph.Add("pageindex", pageindex);
var p = JSON2.stringify(ph.KeyValueArray);
retrieveJsonData("/FADB/GetPagerDSJson", p, "850102069", grid_load_callback);//405576483
}
function btnsearch_click() {
grid_load(1, 20);
}
function callback_w(data, status) {
if (data[0].rcount > 0)
$.messager.alert(‘操作结果提示‘, ‘删除数据成功!‘);
else
$.messager.alert(‘操作结果提示‘, ‘删除数据失败!‘, ‘error‘);
}
function datachange(items) {
var idfields = "";
$.each(items, function (index, item) {
idfields += item.userno + ‘,‘
});
if (idfields.length > 0) idfields = idfields.substring(0, idfields.length - 1);
var ph = new parmHelper();
ph.Add("usernos", idfields);
ph.Add("loginno", "5117000000");
var parm = JSON2.stringify(ph.KeyValueArray);
postJsonData("/FADB/postJson", parm, "1269579561", callback_w);
}
var TypesList = [{ "value": "", "text": "==请选择==" }, { "value": "生产设备", "text": "生产设备" }, { "value": "IT设备", "text": "IT设备" }];
var StatusList = [{ "value": "", "text": "==请选择==" }, { "value": "闲置", "text": "闲置" }, { "value": "使用中", "text": "使用中" }, { "value": "外注", "text": "外注" }];
function showformatter(array, value) {
if (value == "") return "";
for (var i = 0; i < array.length; i++) {
if (array[i].value == value) {
return array[i].text;
}
}
}
function typesformatter(value, rowData, rowIndex) {
return showformatter(TypesList, value);
}
function statusformatter(value, rowData, rowIndex) {
return showformatter(StatusList, value);
}
function initGrid(grid) {
getjquery(‘dg‘).datagrid({
//title: ‘CheckBox Selection on DataGrid‘,
url: ‘‘,
width: ‘700‘,
rownumbers: true,
idField: ‘fano‘,
pageList: [10, 30],
columns: [[
{ field: ‘rowid‘ },
{ field: ‘faname‘, title: ‘资产名称‘, formatter: function (value, row) { return ‘<span title="‘ + value + ‘" class="easyui-tooltip">‘ + value + ‘</span>‘; } },
{ field: ‘fano‘, 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:red;"‘; rstr += ‘>‘ + value + ‘</span>‘; return rstr; } },
{ field: ‘costcenter‘, title: ‘费用代码‘, formatter: function (value, row) { var rstr = ‘<span title="‘ + value + ‘" class="easyui-tooltip"‘; if (value.length < 4) rstr += ‘ style="color:red"‘; rstr += ‘>‘ + value + ‘</span>‘; return rstr; } },
{ field: ‘userlocation‘, title: ‘存放位置‘, editor: ‘text‘, formatter: function (value, row) { var rstr = ‘<span title="‘ + value + ‘" class="easyui-tooltip"‘; if (value.length < -1) rstr += ‘ style="color:red;width:200px;"‘; rstr += ‘>‘ + value + ‘</span>‘; return rstr; } },
{ field: ‘fastatus‘, title: ‘资产状态‘, width: ‘100‘, editor: { "type": "combobox", "options": { data: StatusList, valueField: "value", textField: "text" } }, formatter: statusformatter },
{ field: ‘fatypes‘, title: ‘资产类别‘, width: ‘100‘, editor: { "type": "combobox", "options": { data: TypesList, valueField: "value", textField: "text" } }, formatter: typesformatter },
{
field: ‘action‘, title: ‘操作‘, width: 70, align: ‘center‘,
formatter: function (value, row, index) {
if (row.editing) {
var s = ‘<a href="#" onclick="savechange(‘ + index + ‘)">保存</a> ‘;
var c = ‘<a href="#" onclick="cancelrow(‘ + index + ‘)">取消</a>‘;
return s + c;
}
else {
var e = ‘<a href="#" onclick="editrow(‘ + index + ‘)">编辑</a> ‘;
//var d = ‘<a href="#" onclick="deleterow(‘ + index + ‘)">Delete</a>‘;
return e;
}
}
}
]],
fit: true,
singleSelect: true,
//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 editrow(index) {
$(‘#dg‘).datagrid(‘beginEdit‘, index);
var editors = $(‘#dg‘).datagrid(‘getEditors‘, index);
var cellEdit = $(‘#dg‘).datagrid(‘getEditor‘, { index: index, field: ‘fano‘ });
var it = cellEdit.target; // 得到文本框对象
it.prop(‘readonly‘, true); // 设值只读
it.css(‘backgroundColor‘, "gray");
}
function cancelrow(index) {
getjquery("dg").datagrid(‘cancelEdit‘, index);
}
function mgr_callback(data, status) {
if (data.length > 0 && data[0].tcount > 0) {
$.messager.alert(‘操作结果提示‘, ‘保存数据成功!‘, ‘info‘);
}
else
$.messager.alert(‘操作结果提示‘, ‘保存数据失败!‘, ‘error‘);
}
function savechange(index) {
var grid = getjquery("dg");
var editors = grid.datagrid(‘getEditors‘, index);
var fano = editors[0].target.val();
var falo = editors[1].target.val();
var fatp = editors[2].target.combobox("getValue");
var fass = editors[3].target.combobox("getValue");
var un = $.request("userno");
var ph = new parmHelper();
ph.Add("fano", fano);
ph.Add("userno", un);
ph.Add("location", falo);
ph.Add("status", fatp);
ph.Add("types", fass);
var p = JSON2.stringify(ph.KeyValueArray);
postJsonData("/FADB/postJson", p, "1106102981", mgr_callback);//1333579789
getjquery("dg").datagrid(‘endEdit‘, index);
}
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-add‘,
handler: function () {
getjquery("win_newdata").window(‘open‘);
}
}, {
iconCls: ‘icon-cut‘,
handler: function () {
var arr = grid.datagrid("getChecked");
datachange(arr);
//$.each(arr, function (index, item) {
// });
}
}, {
iconCls: ‘icon-save‘,
handler: function () {
alert(‘save‘);
}
}]*/
});
}
$(function () {
//读取数据
getjquery("btnsearch").bind("click", btnsearch_click);
EnterEvent.InputEnterEventBind(grid_load);
var grid = getjquery("dg");
//初始化数据显示结构
initGrid(grid);
//初始化分页控件
initGridPager(grid)
//加载数据
grid_load(1, 20);
});
function btnsave_click() {
getjquery("win_newdata").window(‘close‘);
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:‘north‘,border:false,title:‘资产日常管理‘" style="height: 135px;padding: 10px">
<table class="grid" data-options="fit:true;">
<tr>
<td>费用代码:</td>
<td><input class="text-left" type="text" id="txtcostcenter" name="cc" /></td>
<td>资产名称:</td>
<td><input class="text-left" type="text" id="txtfaname" name="name" /></td>
<td>资产编号:</td>
<td><input class="text-left" type="text" id="txtfano" name="facode" /></td>
</tr>
<tr>
<td>存放位置:</td>
<td><input class="text-left" type="text" id="txtlocation" name="facode" /></td>
<td>资产状态:</td>
<td>
<select class="easyui-combobox" name="language" id="ddlstatus">
<option value="">==请选择==</option>
<option value="闲置">闲置</option>
<option value="使用中">使用中</option>
<option value="外注">外注</option>
</select>
</td>
<td>资产类别:</td>
<td>
<select class="easyui-combobox" name="language" id="ddltype">
<option value="">==请选择==</option>
<option value="生产设备">生产设备</option>
<option value="IT设备">IT设备</option>
</select>
</td>
</tr>
<tr>
<td colspan="6"><a href="#" id="btnsearch" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">查 询</a></td>
</tr>
</table>
</div>
<div data-options="region:‘center‘,title:‘检索结果列表‘">
<table id="dg" class="easyui-datagrid" style="width: 700px; height: 300px"></table>
</div>
</body>
</html>
- 关键代码段用了红色标识
以上是关于Web应用开发---查询Grid显示行编辑的主要内容，如果未能解决你的问题，请参考以下文章
避免在 Grid Edit 行编辑中显示 ValueField
Kendo UI Grid：自定义下拉提供程序在视图模式下不显示文本
内容查询 Web 部件在没有 Web 部件区域的情况下不显示