operamasks-ui之omGrid简单使用
孟翰海
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>复杂案例</title>
<script type="text/javascript" src="../../jquery.js"></script>
<script src="../../ui/om-core.js"></script>
<script src="../../ui/om-mouse.js"></script>
<script src="../../ui/om-resizable.js"></script>
<script src="../../ui/om-draggable.js"></script>
<script src="../../ui/om-position.js"></script>
<script src="../../ui/om-combo.js"></script>
<script type="text/javascript" src="../../ui/om-button.js"></script>
<script src="../../ui/om-numberfield.js"></script>
<script src="../../ui/om-calendar.js"></script>
<script type="text/javascript" src="../../ui/om-grid.js"></script>
<script type="text/javascript" src="../../ui/om-grid-roweditor.js"></script>
<link rel="stylesheet" type="text/css" href="../../themes/default/om-all.css" />
<link rel="stylesheet" type="text/css" href="../common/css/demo.css" />
<!-- view_source_begin -->
<script type="text/javascript">
$(document).ready(function() {
$('#grid').omGrid({
limit:10,
title : '表格',
width:600,
height : 300,
colModel : [ {header : 'ID', name : 'id', width : 100, align : 'center',editor:{}},
{header : '地区', name : 'city', width : 120, align : 'left',editor:{}},
{header : '地址', name : 'address', align : 'left', width : 'autoExpand',editor:{}} ],
dataSource : "griddata.do?method=fast",
onBeforeEdit : function(){
$('#demo >:button').attr("disabled",true);
},
onAfterEdit : function(){
$('#demo >:button').removeAttr("disabled");
},
onCancelEdit : function(){
$('#demo >:button').removeAttr("disabled");
}
});
$('#add').click(function(){
$('#grid').omGrid('insertRow',0,{id:100});
});
$('#del').click(function(){
var dels = $('#grid').omGrid('getSelections');
if(dels.length <= 0 ){
alert('请选择删除的记录！');
return;
}
$('#grid').omGrid('deleteRow',dels[0]);
});
$('#save').click(function(){
var data = $('#grid').omGrid('getChanges');
/*****此处传递data到后台并处理*******/
/*****保存成功之后执行如下操作********/
$('#grid').omGrid('saveChanges');
/******或者执行$('#grid').omGrid('reload');***/
});
});
</script>
<!-- view_source_end -->
</head>
<body>
<!-- view_source_begin -->
<div id="demo" style="margin-left:30px;margin-top:20px">
<input type="button" id="add" value="新增"/>
<input type="button" id="del" value="删除"/>
<input type="button" id="save" value="保存修改"/>
<table id="grid"></table>
</div>
<!-- view_source_end -->
<div id="view-desc">
<p>
对grid进行增删改，分别调用了insertRow、deleteRow、双击某行的操作，保存通过getChanges方法获取对grid的修改，数据格式为type["update","insert","delete"]。
</p>
<p>
omGrid行编辑插件可以为omGrid提供行编辑的功能，它支持修改行信息，动态添加新行，动态删除行，取消行编辑，回滚编辑操作等一系列的功能，详情请看omGrid组件关于行编辑插件的方法
(cancleEdit,cancleChanges,editRow,deleteRow,getChanges,insertRow,saveChanges)。</p>
<p>
要使omGrid成为行可编辑的，只需要配置editor选项。如下<br/>
<pre>
$('#grid').omGrid({
colModel :
[{
header:"编号",
name:"id",
editor:{editable:false}
},
{
header:"姓名",
name:"name",
editor:{
rules:["required",true,"姓名是必填的"],
type:"text",
editable:true,
name:"userName"}}
});
</pre>
editor配置项详细说明如下:
<table class='config-desc' cellspacing=0>
<tr>
<td>配置项</td>
<td>说明</td>
</tr>
<tr>
<td>type</td>
<td>列编辑的类型，支持"text","omCalendar","omCombo","omNumberField"，默认值为"text"</td>
</tr>
<tr>
<td>options</td>
<td>创建所对应类型组件所需的配置项 ，详情请看各个类型的组件文档。</td>
</tr>
<tr>
<td>name</td>
<td>由于检验时需要输入域拥有name属性，此属性作为这些输入域的name属性和id属性，如果不提供此属性，则用colModel中列配置项的name属性 </td>
</tr>
<tr>
<td>rules</td>
<td> []或者[[],[]]。列编辑框的检验规则，跟omValidate的校验规则是一致的。如["required",true,"此域不可以为空"]或者[["min",10,"不可以小于10"],["max",100,"不可以大于100"]]，
你也可以用$.validator.addMethod("methodName", functionName,defaultMessage)添加自定义校验规则，详情请看omValidate校验插件。 </td>
</tr>
<tr>
<td>editable</td>
<td>列是否可编辑，为Boolean或者function。当为function时，返回false表示此列不可编辑。</td>
</tr>
<tr>
<td>renderer(value , rowData)</td>
<td>如果列是不可编辑的，并且提供了此属性（是个方法），那么此方法的返回值会替代默认产生的只读input域 </td>
</tr>
<tr>
<td>getValue</td>
<td>当使用“custom”类型(其它类型无效)在点击“确定”按钮时，组件通过此方法获取值进行回填。</td>
</tr>
</table>
<br/>
特别说明:
<ul>
<li>如果某个列配置项没有editor属性，则认为此列不可编辑，默认在编辑时渲染成一个只读的input</li>
<li>如果配置了editor属性，但editor没有editable属性，则列是可编辑的，否则要看editable的值:
<ul>
<li>editable=true表示可编辑,editable=false表示不可编辑</li>
<li>editable为一个函数时，返回true表示可编辑，false表示不可编辑</li>
</ul>
</li>
<li>如果所有的列都不可编辑，那么默认情况下行编辑插件会失效。如果想新增行，并进行编辑，要设置editMode属性，详见属性editMode的说明。</li>
</ul>
</p>
</div>
</body>
<script type="text/javascript" src="../common/js/themeloader.js"></script>
</html>
类似资料：