1.easyui datagrid跨行跨列表头，如下图所示
可以通过html方式和js方式定义，以下给出js方式。
$(document).ready(function() {
$('#dg').datagrid({
fit : true, // 完全填充，继承自父类pannel的属性
nowrap : false, // 是否只显示一行，即文本过多是否省略部分
striped : true, // 间隔条纹
singleSelect : true, // 只能单选
rownumbers : true, // 行号
scrollbarSize : 0, // 去掉右侧滚动条列
pagination : false, // 包含分页
pageSize : 20, // 分页值
showHeader : true,
pageList : [ 20 ],// 可以设置每页记录条数的列表
toolbar : '#tb',
columns : [
// 第一行
[{field:'endNum',title:'已放款档案总笔数',width:110,align:'center',rowspan:2},//跨两行
{title:'其中：',colspan:4},//跨四列
{field:'dealingNum',title:'未放款档案总笔数',width:110,align:'center',rowspan:2},
{title:'其中：',colspan:4},//跨四列
{field:'loanAmountTotal_end',title:'已放款总金额(万)',width:110,align:'center',rowspan:2}],
// 第二行第一部分
[{field:'endNum1',title:'个人一手房',align:'center',rowspan:1},
{field:'endNum2',title:'个人二手房',align:'center',rowspan:1},
{field:'endNum3',title:'个人消费',align:'center',rowspan:1},
{field:'endNum4',title:'个人经营',align:'center',rowspan : 1},
// 第二行第二部分
{field:'endNum1',title:'个人一手房',align:'center',rowspan:1},
{field:'endNum2',title:'个人二手房',align:'center',rowspan:1},
{field:'endNum3',title:'个人消费',align:'center',rowspan:1},
{field:'endNum4',title:'个人经营',align:'center',rowspan : 1}]
],
url : './count/loadBranchFilesCount.do'
});
});2.可改写保存的datagrid
var submitUrl;
function submit() {
$('#fm').form('submit', {
url : submitUrl,
onSubmit : function() {
var isValid = $(this).form('validate');
if (!isValid) {
alert("无法提交数据，请按要求录入要素");
} else {
// 校验通过， 提交关闭，防止多次提交
$('#submitBtn').linkbutton('disable');
}
return isValid; // 返回false终止表单提交
},
success : function(data) {
$('#dlg').dialog('close');
var jsObject = eval('(' + data + ')');//easyUI,将json转js object
//alert(JSON.stringify(data));
//alert("data.success:" + data.success);
if (jsObject.success) {
alert("提交成功");
// 重新加载datagrid
$('#dg').datagrid('reload');
} else {
alert("提交失败，出错原因: " + jsObject.msg);
}
}
});
}
/**
* 获得rowIndex
* @param target
* @returns
*/
function getRowIndex(target){
// 使用jquery选择器选择到row index
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
/**
* 将选中的行，启用编辑
* @param target
*/
function editrow(target){
$('#dg').datagrid('beginEdit', getRowIndex(target));
}
/**
* 保存编辑
* @param target
*/
//因为没有选择行，所以无法在onEndEdit使用getSelected获得行
//需要在此处保存记录
function saverow(target){
var rowIndex = getRowIndex(target);
$('#dg').datagrid('endEdit', rowIndex);
var dataGridRows = $('#dg').datagrid('getRows');
var selectRow = dataGridRows[rowIndex];
var updateUrl = './para/updateFileDistPara.do?roleId=' + selectRow.roleId + "&flag=" + selectRow.flag;
$.getJSON(updateUrl, function(json) {
// 打印json
//console.log(JSON.stringify(json.res));
//alert(JSON.stringify(json));
if (json.success) {
// 从右下角slide弹窗
$.messager.show({
title : '提示',
msg : '保存成功',
timeout : 1500,
showType : 'slide'
});
} else {
$.messager.alert("提示", "保存失败，出错原因:" + json.msg);
}
});
}
/**
* 取消编辑
* @param target
*/
function cancelrow(target){
$('#dg').datagrid('cancelEdit', getRowIndex(target));
}
$(document).ready(function() {
$('#dg').datagrid({
fit : true, // 完全填充，继承自父类pannel的属性
nowrap : false, // 是否只显示一行，即文本过多是否省略部分
striped : true, // 间隔条纹
singleSelect: true, // 只能单选
rownumbers : true, // 行号
scrollbarSize : 0, // 去掉右侧滚动条列
idField:'roleId',
columns:[[
{field:'roleName',title:'角色名',width:100,align:'center'},
{field:'flag',title:'文件分发功能',width:100,align:'center'
,formatter:function(value, row, index){
switch (row.flag) {
case "0":
return "未指定";
case "1":
return "指定";
default :
return "数据异常";
}},
// 进入编辑模式，才能启用editor
editor:{
type:'combobox',
options:{
valueField:'flag',
textField:'flagName',
editable:false,
panelHeight:'auto',
data:[{flag:'0', flagName:'未指定'},{flag:'1', flagName:'指定'}],
required:true
}
}},
{field:'action',title:'操作',width:80,align:'center',
// 根据row.editing的值显示不同的操作
formatter:function(value,row,index){
// 第一次加载时，row.editing为undefined
if (row.editing){
var s = '<a href="javascript:void(0)" οnclick="saverow(this)">保存</a> ';
var c = '<a href="javascript:void(0)" οnclick="cancelrow(this)">取消</a>';
return s+c;
} else {
var e = '<a href="javascript:void(0)" οnclick="editrow(this)">编辑</a> ';
//var d = '<a href="javascript:void(0)" οnclick="deleterow(this)">Delete</a>';
//return e+d;
return e;
}
}
}
]],
url:'./para/loadFileDistPara.do',
// 编辑之前事件，刷新row，使得row.editing为true，操作栏变成保存与取消
onBeforeEdit:function(index,row){
row.editing = true;
$(this).datagrid('refreshRow', index);
},
// 编辑完成后，刷新row，使得row.editing为false，操作栏变成编辑
onAfterEdit:function(index,row){
row.editing = false;
$(this).datagrid('refreshRow', index);
},
// 编辑取消后，刷新row，使得row.editing为false，操作栏变成编辑
onCancelEdit:function(index,row){
row.editing = false;
$(this).datagrid('refreshRow', index);
}
});
});下面代码直接保存为js，在html页面中引用该js文件即可
$.extend(
$.fn.validatebox.defaults.rules,
{
minLength : { // 判断最小长度
validator : function(value, param) {
return value.length >= param[0];
},
message : '最少输入 {0} 个字符。'
},
length : {
validator : function(value, param) {
var len = $.trim(value).length;
return len >= param[0] && len <= param[1];
},
message : "内容长度介于{0}和{1}之间."
},
onlyLength : {
validator : function(value, param) {
var len = $.trim(value).length;
return len == param[0];
},
message : "内容长度必须为{0}."
},
phone : {// 验证电话号码
validator : function(value) {
return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i
.test(value);
},
message : '格式不正确,请使用下面格式:028-86789101'
},
mobile : {// 验证手机号码
validator : function(value) {
return /^(13|15|18|17|14)\d{9}$/i.test(value);
},
message : '手机号码格式不正确(正确格式如：13550017681)'
},
phoneOrMobile : {// 验证手机或电话
validator : function(value) {
return /^(13|15|18|17|14)\d{9}$/i.test(value)
|| /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i
.test(value);
},
message : '请填入手机或电话号码,如13550017681或028-86789101'
},
idcard : {// 验证身份证
validator : function(value) {
return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
},
message : '身份证号码格式不正确'
},
floatOrInt : {// 验证是否为小数或整数
validator : function(value) {
return /^(\d{1,3}(,\d\d\d)*(\.\d{1,3}(,\d\d\d)*)?|\d+(\.\d+))?$/i
.test(value);
},
message : '请输入数字，并保证格式正确'
},
currency : {// 验证货币
validator : function(value) {
return /^d{0,}(\.\d+)?$/i.test(value);
},
message : '货币格式不正确'
},
qq : {// 验证QQ,从10000开始
validator : function(value) {
return /^[1-9]\d{4,9}$/i.test(value);
},
message : 'QQ号码格式不正确(正确如：95557251)'
},
integer : {// 验证整数
validator : function(value) {
return /^[+]?[1-9]+\d*$/i.test(value);
},
message : '请输入整数'
},
chinese : {// 验证中文
validator : function(value) {
return /^[\u0391-\uFFE5]+$/i.test(value);
},
message : '请输入中文'
},
chnLength: {// 验证中文
validator : function(value) {
return /^[\u0391-\uFFE5]+$/i.test(value);
},
message : '请输入中文'
},
english : {// 验证英语
validator : function(value) {
return /^[A-Za-z]+$/i.test(value);
},
message : '请输入英文'
},
num : {// 纯数字
validator : function(value) {
return /^[0-9]+$/i.test(value);
},
message : '请输入纯数字'
},
unnormal : {// 验证是否包含空格和非法字符
validator : function(value) {
return /.+/i.test(value);
},
message : '输入值不能为空和包含其他非法字符'
},
username : {// 验证用户名
validator : function(value) {
return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
},
message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'
},
faxno : {// 验证传真
validator : function(value) {
// return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[
// ]){1,12})+$/i.test(value);
return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i
.test(value);
},
message : '传真号码不正确'
},
zip : {// 验证邮政编码
validator : function(value) {
return /^[1-9]\d{5}$/i.test(value);
},
message : '邮政编码格式不正确'
},
ip : {// 验证IP地址
validator : function(value) {
return /d+.d+.d+.d+/i.test(value);
},
message : 'IP地址格式不正确'
},
name : {// 验证姓名，可以是中文或英文或数字
validator : function(value) {
return /^[\u0391-\uFFE5]+$/i.test(value)
| /^\w+[\w\s]+\w+$/i.test(value)
| /^[0-9]+$/i.test(value);
},
message : '请输入姓名(中文或英文或数字)'
},
carNo : {
validator : function(value) {
return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value);
},
message : '车牌号码无效（例：粤J12350）'
},
carenergin : {
validator : function(value) {
return /^[a-zA-Z0-9]{16}$/.test(value);
},
message : '发动机型号无效(例：FG6H012345654584)'
},
email : {
validator : function(value) {
return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
.test(value);
},
message : '请输入有效的电子邮件账号(例：abc@126.com)'
},
msn : {
validator : function(value) {
return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
.test(value);
},
message : '请输入有效的msn账号(例：abc@hotnail(msn/live).com)'
},
department : {
validator : function(value) {
return /^[0-9]*$/.test(value);
},
message : '请输入部门排序号(例：1)'
},
same : {
validator : function(value, param) {
if ($("#" + param[0]).val() != "" && value != "") {
return $("#" + param[0]).val() == value;
} else {
return false;
}
},
message : '两次输入的密码不一致！'
}
});easyui validator用法：
比如要验证IP地址，在上面js中validator的方法为function(value){}，该value就是值html中input框的值，所以html中校验ip的写法为：
<input name="ip" class="easyui-textbox" prompt="请输入IP" style="width:200px" data-options="validType:ip" />对于minLength，验证方法为function(value, param)，其中value为前端页面input中的值，param是一个数组，可以使用param[0]，param[1]来引用，在这里只能引用param[0]，结果为8
<input name="num" class="easyui-textbox" prompt="请输入最小长度8的字符串" style="width:200px" data-options="minLength[8]" />对于length，value为前端页面input中的值，param[0]为1，param[1]为10
<input name="length" class="easyui-textbox" prompt="请输入长度1-10之间的字符串" style="width:200px" data-options="length[1,10]" /><input name="id" class="easyui-textbox" prompt="请输入档案编号" style="width:200px" data-options="validType:['num','minLength[1]','notSame[2]']" />
扫一扫
1400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
