<script type="text/javascript">
var dataGrid;
$(function() {
dataGrid = $('#dataGrid').datagrid({
url : '${pageContext.request.contextPath}/Controller/Controller对应的方法名dataGrid',
fitColumns : true,自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
pagination : true,在 datagrid 的底部显示分页栏。
idField : 标识字段 '对应ID',
pageSize : 10,每页显示的数据数目
pageList : [ 10, 20, 30, 40, 50 ],可选每页显示的数据数目
sortName:排序字段,
sortOrder:排序方式:asc|desc
checkOnSelect : false,
selectOnCheck : false,
nowrap : true, 把数据显示在一行里
striped : true, 就把行条纹化。(即奇偶行使用不同背景色)
rownumbers : true,显示行号的列。
singleSelect : true,只允许选中一行。
frozenColumns : [ [和列的特性一样,但是这些列将被冻结在左边。null
{
field : '字段名',
title : '**',
width : 120,
sortable:true,
formatter : function(value, row, index){
return $.formatString('<a onclick="方法名(\'{0}\');"href="javascript:void(0);">{1}</a>',value,value);
}
} ] ],
columns : [ [ { datagrid 的 column 的配置对象
field : 'action',
title : '操作',
width : 50,
formatter : function(value, row, index) {
var str;
if(条件){
str+= ' ';
str += $.formatString('<img onclick="alterFun(\'{0}\');" src="{1}" title="修改"/>', row.Id, '图片路径');
}
if (条件) {
str += ' ';
str += $.formatString('<img onclick="方法名(\'{0}\');" src="{1}" title="**"/>', row.Id, '图片路径');
}
return str;
}
}
] ],
toolbar : '#toolbar',
onLoadSuccess : function(data) {
$('#searchForm table').show();
parent.$.messager.progress('close');
},
onClickRow: function (rowIndex被双击行的索引,从0开始, rowData被双击行对应的记录) {
$(this).datagrid('unselectRow'取消选中一行, rowIndex);
},
onRowContextMenu : function(e, rowIndex, rowData) {
e.preventDefault();
$(this).datagrid('unselectAll');
$(this).datagrid('selectRow', rowIndex);
$('#menu').menu('show', {
left : e.pageX,
top : e.pageY
});
}
});
});
function searchFun() {
dataGrid.datagrid('load', $.serializeObject($('#searchForm')));
}
function cleanFun() {
$('#searchForm input').val('');
}
function alterFun(Id){
parent.$.modalDialog({
title : '****',
width : 450,
height : 450,
href : '${pageContext.request.contextPath}/Controller/要弹出的子页面?Id=' + Id,
buttons : [ {
text : '修改',
handler : function() {
parent.$.modalDialog.openner_dataGrid = dataGrid;
var f = parent.$.modalDialog.handler.find('#form');
f.submit();
}
} ]
});
}
function popupWindow(){
parent.$.modalDialog({
title : '左上方标题名',
width : 450,子页面的宽、高
height : 450,
href : '${pageContext.request.contextPath}/Controller/Controller对应view',
【@RequestMapping("/Controller对应view")
public String Controller对应view(HttpServletRequest request){
return 子页面;
}】
buttons : [ {
text : '右下角按钮的文本',
handler : function() {
parent.$.modalDialog.openner_dataGrid = dataGrid;
var f = parent.$.modalDialog.handler.find('#form');
f.submit();
}
} ]
});
}
</script>
<body>
<div class="easyui-layout" data-options="fit : true,border : false">
<div data-options="region:'north',title:'查询条件',border:false" style="height: 120px; overflow: hidden;">
<form id="searchForm">
<input name="queryFlag" type="hidden" id="queryFlag" />
<table class="table table-hover table-condensed" style="display: none;">
<tr>
<th>**</th>
<td ><input placeholder="" name="" data-options="" class="span2" /></td>
</tr>
<tr>
<th>申请日期</th>
<td colspan="3">
<input class="span2" value="${applyDt_begin}" name="applyDt_begin" id="applyDt_begin" placeholder="点击选择日期" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'applyDt_end\')}',readOnly:true,dateFmt:'yyyy-MM-dd'})"/>
至
<input class="span2" value="${applyDt_end}" name="applyDt_end" id="applyDt_end" placeholder="点击选择日期" onclick="WdatePicker({minDate:'#F{$dp.$D(\'applyDt_begin\')}',readOnly:true,dateFmt:'yyyy-MM-dd'})" />
</td>
<th>状态</th>
<td>
<select name="" class="easyui-combobox" data-options=
"width:140,height:29,editable:true,panelHeight:'auto'">
<option value="">请选择</option>
<c:forEach items="${btOrderStMap}" var="each">
<option value="${each.dataKey}">${each.dataValue}</option>
</c:forEach>
</select>
</td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',border:false">
<table id="dataGrid"></table>
</div>
</div>
<div id="toolbar" style="display: none;">
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'brick_add',plain:true" onclick="searchFun();">查询</a>
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'brick_delete',plain:true" onclick="cleanFun();">清空条件</a>
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'brick_add',plain:true" onclick="popupWindow();">申请</a>
</div>
</body>
<script type="text/javascript">
$(function() {
parent.$.messager.progress('close');
$('#form').form({
url : '${pageContext.request.contextPath}【路径】/Controller/对应方法',
onSubmit : function() {
parent.$.messager.progress({
title : '提示',
text : '数据处理中,请稍后....'
});
【正则表达式相关的校验
var isValid = $(this).form('validate');
if (!isValid) {
parent.$.messager.progress('close');
}
return isValid;】
},
success : function(result) {
parent.$.messager.progress('close');
result = $.parseJSON(result);
if (result.success) {
parent.$.modalDialog.openner_dataGrid.datagrid('reload');
parent.$.modalDialog.handler.dialog('close');
} else {
parent.$.messager.alert('错误', result.msg, 'error');
}
}
});
});
function validate(value) {
var reg = new RegExp("^[0-9]*$");
if (!reg.test(value)) {
return false;
}
if (!/^[0-9]+$/.test(value)) {
return false;
}
return true;
}
function cancle() {
parent.$.modalDialog.handler.dialog('close');
}
$.extend($.fn.validatebox.defaults.rules, {
inputNum : {
validator : function(value) {
return /^\+?[1-9]\d*$/i.test(value);
},
message : '格式不正确!'
}
});
</script>
<tr>
<td align="center" style="background-color: #E7F3FB; vertical-align: middle;" width="20%" >
<font size=?>***</font>
</td>
<td align="left" style="vertical-align: middle;">
<input type="text" name="" id="" value="" class="easyui-validatebox " data-options="validType:'inputNum ',required:true"/>
</td>
</tr>
easyUI 中文API
jQuery EasyUI API