网页布局四之jQuery-easyUI的datagrid的基本应用
2014-03-10 19:31
387 查看
在使用easyuI时,要先引入四个包,在此就不重复了。
一、要使用easyui的datagrid一定要先在<div>或<table>中引入class,例如:
二、easyui的datagrid读取的数据类型为json格式。而我没有写后台的controll代码,所以,就要自己写一个json格式的数据文件。然后用url:'xx/xx/data.json'来引入数据。
三、若想在页面上修改数据,就必须要写上
四、要编辑数据,就要使用editor来定义文本类型。text为文本,number为数字,datebox为日期。如下代码:
最后为完整代码:
一、要使用easyui的datagrid一定要先在<div>或<table>中引入class,例如:
<table id="dg" class="easyui-datagrid" title="我的DataGrid" style="width:500px;height:600px;" data-options=" loadMsg:'数据加载中,请稍后……', rownumbers:false,singleSelect:true,url:'data/datagrid_data1.json',method:'get', toolbar:'#tb',onClickRow:onClickRow,pagination:true,pageSize:2">在此段代码中不仅有要使用的jquery-easyUi的类型,还有其格式,在style中定义。
二、easyui的datagrid读取的数据类型为json格式。而我没有写后台的controll代码,所以,就要自己写一个json格式的数据文件。然后用url:'xx/xx/data.json'来引入数据。
三、若想在页面上修改数据,就必须要写上
onClickRow:onClickRow。它是行点击属性。
四、要编辑数据,就要使用editor来定义文本类型。text为文本,number为数字,datebox为日期。如下代码:
<th data-options="field:'id',width:45,editor:{type:'numberbox',options:{precision:0}}">id</th> <th data-options="field:'name',width:80,editor:'text'">name</th> <th data-options="field:'sex',width:100,editor:'text'">sex</th> <!--<th data-options="field:'listprice',width:80,align:'right'">List Price</th>--> <th data-options="field:'age',width:80,align:'right',editor:'numberbox'">age</th> <!--<th data-options="field:'attr1',width:240">Attribute</th>--> <th data-options="field:'hobby',width:60,align:'center',editor:'text'">hobby</th> <th data-options="field:'borthDate',width:100,editor:'datebox'">出生日期(月/日/年)</th>引入结果图:
最后为完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mytables</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/icon.css">
<!--<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/demo.css">-->
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
</head>
<body>
<div align="center">
<h2>表单</h2>
<div style="margin:10px 0;"></div>
</div>
<div align="center">
<table id="dg" class="easyui-datagrid" title="我的DataGrid" style="width:500px;height:600px;"
data-options=" loadMsg:'数据加载中,请稍后……', rownumbers:false,singleSelect:true,url:'data/datagrid_data1.json',method:'get',
toolbar:'#tb',onClickRow:onClickRow,pagination:true,pageSize:2">
<thead>
<tr>
<th data-options="field:'id',width:45,editor:{type:'numberbox',options:{precision:0}}">id</th> <th data-options="field:'name',width:80,editor:'text'">name</th> <th data-options="field:'sex',width:100,editor:'text'">sex</th> <!--<th data-options="field:'listprice',width:80,align:'right'">List Price</th>--> <th data-options="field:'age',width:80,align:'right',editor:'numberbox'">age</th> <!--<th data-options="field:'attr1',width:240">Attribute</th>--> <th data-options="field:'hobby',width:60,align:'center',editor:'text'">hobby</th> <th data-options="field:'borthDate',width:100,editor:'datebox'">出生日期(月/日/年)</th>
<tbody><input class="easyui-datebox"/></tbody>
</tr>
</thead>
</table>
</div>
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onClick="append()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onClick="removeit()">删除</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onClick="accept()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onClick="reject()">撤销</a>
</div>
<script type="text/javascript"> var editIndex =undefined; function endEditing(){ if (editIndex == undefined){return true} if ($('#dg').datagrid('validateRow', editIndex)){ var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'}); //var productname = $(ed.target).combobox('getText'); //$('#dg').datagrid('getRows')[editIndex]['productname'] = productname; $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickRow(index){ if (editIndex != index){ if (endEditing()){ $('#dg').datagrid('selectRow', index).datagrid('beginEdit', index); editIndex = index; } else { $('#dg').datagrid('selectRow', editIndex); } } } function append(){ if(endEditing()){ $('#dg').datagrid('appendRow',{id:1}); editIndex = $('dg').datagrid('getRows').length-1; $('#dg').datagrid('selectRow',editIndex).datagrid('beginEdit',editIndex); } } function removeit(){ if(editIndex == undefined){return;} $('#dg').datagrid('cancelEdit',editIndex).datagrid('deleteRow',editIndex); editIdex = undefined; } function accept(){ if (endEditing()){ $('#dg').datagrid('acceptChanges'); } } function reject(){ $('#dg').datagrid('rejectChanges'); editIndex = undefined; } /*var toolbar = [{ text:'添加', iconCls:'icon-add', handler:function(){ $('#add').window('open'); $('#fs').show(); $('#fs').form('clear'); $('#fs').appendTo('#aa'); //alert('add'); } },{ text:'删除', iconCls:'icon-cut', handler:function(){ alert('cut');} },{ text:'修改', iconCls:'icon-edit', handler:function(){alert('edit');} },{ text:'保存', iconCls:'icon-save', handler:function(){alert('保存');} }];**/ function formatDatebox(value) { if (value == null || value == '') { return ''; } var dt; if (value instanceof Date) { dt = value; } else { dt = new Date(value); if (isNaN(dt)) { value = value.replace(/\/Date\((-?\d+)\)\//, '$1'); //标红的这段是关键代码,将那个长字符串的日期值转换成正常的JS日期格式 dt = new Date(); dt.setTime(value); } } return dt.format("yyyy-MM-dd"); //这里用到一个javascript的Date类型的拓展方法,这个是自己添加的拓展方法,在后面的步骤3定义 } </script>
</body> </html>
相关文章推荐
- 网页布局四之jQuery-easyUI的datagrid的基本应用
- 网页布局三之Jquery EasyUI TreeMenu实战
- jQuery组件easyui基本布局实现代码
- easyui-DataGrid基本用法
- easyui layout+tab+tree实现网站基本布局
- 前端小作品--基本网页布局
- .NET MVC Jquery EasyUI 联合应用示例
- Jquery easyUI—datagrid数据表修改功能实现
- jQuery EasyUI Datagrid性能优化专题(转)
- EasyUI-datagrid表格(基本使用)
- 《jQuery从入门到精通》第三节 在网页中应用jQuery(一)
- jquery easyui datagrid使用参考
- 网页瀑布流布局jQuery实现代码
- 网上商城—网页布局和树标签的应用
- Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + po
- Using JqueryEasyUI 开发应用
- 6款强大的 jQuery 网页布局创建及优化插件
- 解决EasyUI-Datagrid和LinqToEntity结合应用时排序问题
- jQuery-easyUI的使用:datagrid实现可编辑表格
- jQuery EasyUI API 中文文档 - DataGrid 数据表格