operamasks-ui之omGrid简单使用

最新推荐文章于 2023-04-28 20:24:17 发布
az44yao
最新推荐文章于 2023-04-28 20:24:17 发布
阅读量694
点赞数
本文链接：https://blog.csdn.net/az44yao/article/details/103101034
版权

<!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>
az44yao
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
operamasks-ui之omGrid简单使用

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>复杂案例</title> <script type="text/javascript...
复制链接

扫一扫