在前端的开发中,页面多了让人纠结,也不好组织,在LayUI中有几种解决办法,分步表单就是比较不错的选择,缺点也明显,所有的页面集中在一个页面中,代码量也大。
在系统参数维护中,用户提出要一步步选择来维护,这样可以减少操作错误,我使用了LayUI的分步表单来完成。
用户的维护操作在一个页面中。
代码量有点大了,HTML部分将近180行,JavaScript代码将近500行,为了调试,我还是集中在一个HTML文件中。
开始网页界面部分设计得有点复杂,300行,结果因为一个<DIV>少加了</DIV>结尾,界面部分总是不正常,被折腾了一下午,调试程序的时候,干脆精简了,去掉了好多的嵌套和其他元素,这样才顺利完成。
通过分步表单,你可以集成很多的页面在一个页面中,完成比较多的功能。
操作界面:
网页代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分步表单</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
<link rel="stylesheet" href="../js/lay-module/step-lay/step.css" media="all">
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-body" style="padding-top: 40px;">
<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;border: 0px solid #d70008;">
<div carousel-item>
<div>
<form class="layui-form" style="margin: 0 auto;max-width: 760px;padding-top: 40px;border: 0px solid #d70008;">
<div class="layui-form-item" style="margin: 0 auto;padding-left: 250px;padding-top: 30px; border: 0px solid #d70008;">
<input type="radio" class="layui-input" name="Dc04" id="D0" value="手工输入" title="手工输入" disabled="disabled">
</div>
<div class="layui-form-item" style="margin: 0 auto;padding-left: 250px;padding-top: 30px; border: 0px solid #d70008;">
<input type="radio" class="layui-input" name="Dc04" id="DA" value="Word文件" title="Word文件" checked="checked" lay-filter="selectType">
</div>
<div class="layui-form-item" style="margin: 0 auto;padding-left: 250px;padding-top: 30px; border: 0px solid #d70008;">
<input type="radio" class="layui-input" name="Dc04" id="DB" value="列表" title="列表" lay-filter="selectType">
</div>
<div class="layui-form-item" style="margin: 0 auto;padding-left: 250px;padding-top: 30px; border: 0px solid #d70008;">
<input type="radio" name="Dc04" id="DC" value="二选一" title="二选一" lay-filter="selectType">
</div>
<div class="layui-form-item" style="margin: 0 auto;padding-left: 250px;padding-top: 30px; border: 0px solid #d70008;">
<input type="radio" name="Dc04" id="DE" value="长文本" title="长文本" lay-filter="selectType">
</div>
<div class="layui-form-item" style="margin: 0 auto;padding-left: 0px;padding-top: 50px; border: 0px solid #d70008;">
<div class="layui-input-block" style="border: 0px solid #270008;text-align: center;left: 0px;margin-left: 0px;">
<button class="layui-btn" lay-submit lay-filter="formStep1"> 下一步 </button>
</div>
</div>
</form>
</div>
<div>
<form class="layui-form" style="margin: 0 auto;max-width: 870px;padding-top: 0px;border: 0px solid #270008;">
<div class="layui-form-item" style="border:0px solid #D11111;margin-top: 0px ;padding-top: 0px;top:0px;">
<script type="text/html" id="toolbarDemo">
<div style="position: absolute;left: 10px; top: 10px; float: left;width: 800px;border: 0px solid #00FF00;">
<label class="layui-form-label" style="font-size: 18px;color: #D70008; white-space:nowrap;text-align: center;" id="lbl_1">从列表中选择一个值</label>
</div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="border: 0px solid #270008;text-align: center;left: 0px;margin-left: 0px;">
<button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
<button class="layui-btn" lay-submit lay-filter="formStepAdd">增加</button>
<button class="layui-btn" lay-submit lay-filter="formStepUpdate">修改</button>
<button class="layui-btn" lay-submit lay-filter="formStepDel">删除</button>
</div>
</div>
</form>
</div>
<div>
<form class="layui-form" style="height: 519px; margin: 0 auto;max-width: 870px;padding-top: 0px;border:0px solid #5FB878;">
<div class="layui-form-item" style="height: 419px; border: 0px solid #D11111;margin-top: 0px ;padding-top: 0px;top:0px;" id="frmWord">
<div class="layui-form-item">
<label class="layui-form-label required">样式类型</label>
<div class="layui-input-inline">
<input type="text" id="DcWord1" value="" class="layui-input" disabled="disabled">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">分类名称</label>
<div class="layui-input-block">
<input type="text" id="DcWord2" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标识名称</label>
<div class="layui-input-block">
<input type="text" id="DcWord3" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="height: 39px;">
<label class="layui-form-label">Word文件</label>
<div class="layui-input-inline" style="width: 400px;">
<input type="text" id="DcWord4" value="" style="width: 400px;" class="layui-input" disabled="disabled">
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn" style="height: 39px;" id="selectWord">选择Word文件</button>
<input type='file' id='readFile' style="opacity: 0;">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">文件后缀</label>
<div class="layui-input-block">
<input type="text" id="DcWord5" value="" class="layui-input" disabled="disabled">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序号</label>
<div class="layui-input-inline">
<input type="number" id="DcWord6" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">说明</label>
<div class="layui-input-block">
<input type="text" id="DcWord7" value="" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item" style="height: 449px; border: 0px solid #D11111;margin-top: 0px ;padding-top: 0px;top:0px;" id="frmLongText">
<div class="layui-form-item">
<label class="layui-form-label required">样式类型</label>
<div class="layui-input-inline">
<input type="text" id="DcLongText1" value="" class="layui-input" disabled="disabled">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">分类名称</label>
<div class="layui-input-block">
<input type="text" id="DcLongText2" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">标识名称</label>
<div class="layui-input-block">
<input type="text" id="DcLongText3" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="height: 119px;">
<label class="layui-form-label">具体值</label>
<div class="layui-input-block" style="border: 0px solid #d70008;width: 700px;height: 119px;">
<textarea id="DcLongText4" placeholder="" class="layui-textarea" style="height: 117px;resize:none;"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">特别字符</label>
<div class="layui-input-inline">
<input type="text" id="DcLongText5" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序号</label>
<div class="layui-input-inline">
<input type="number" id="DcLongText6" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">说明</label>
<div class="layui-input-block">
<input type="text" id="DcLongText7" value="" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
<button class="layui-btn" lay-submit lay-filter="formStepSave">保存</button>
</div>
</form>
</div>
</div>
</div>
<div style="color: #666;">
<p>所有用户的输入都基于目前维护的样式数据。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
var selectType='Word文件';
var selectRow;//选择的行
var OP='';
layui.use([ 'form', 'step','table'], function () {
var $ = layui.$;
var form = layui.form;
var step = layui.step;
var table = layui.table;
//选择Word文件
document.getElementById('selectWord').addEventListener('click',function(){
$("#readFile").trigger("click");
});
document.getElementById('readFile').addEventListener('change',function(){
if(this.files.length===0){
console.log('没有选择文件!');
return;
}
let reader=new FileReader();
reader.onload=function (){
// console.log(reader.result);
}
// reader.readAsText(this.files[0]);
// console.log(this.files[0].size);
// console.log(this.files[0].name);
// document.getElementById('Dc05').
sFilename=this.files[0].name.toLowerCase().split('.');
fileExt=sFilename[1];
// console.log(fileExt);
document.getElementById('DcWord4').value=sFilename;
document.getElementById('DcWord5').value=fileExt;
// console.log(this.files[0].type);
})
table.render({
elem: '#currentTableId',
// url: 'ZTBStyleTableFormStep.php',
// method:'POST',
// where:{"OP":"列表","selectType":selectType},
toolbar: '#toolbarDemo',
defaultToolbar: [''],
height:'523px',
width:'600px',
cols: [[
{type: 'radio', width: 80, title: '选择'},
{field: 'c01', width: 220, title: '样式类型', hide:true},
{field: 'c02', width: 200, title: '分类名称'},
{field: 'c03', width: 140, title: '标识名称'},
{field: 'c04', width: 160, title: '具体值'},
{field: 'c05', width: 160, title: '值类型', hide:true},
{field: 'c06', width: 80, title: '排序号'},
{field: 'c07', width: 260, title: '说明'}
]],
limits: [10],
limit: 10,
page: true,
even: true,
skin: 'line',
done: function (res, curr, count) {
}
});
function generateUpdateSql(strSql,sqlFieldName,sqlFieldType,elementId,srcValue){
let sTemp;
sTemp=document.getElementById(elementId).value.trim();
if(sTemp != srcValue){
if(strSql==''){
switch(sqlFieldType){
case 'STRING':
strSql=" "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
break;
case 'DATE':
strSql=" "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
break;
case 'NUMBER':
strSql=" "+sqlFieldName+"="+document.getElementById(elementId).value;
break;
default:
break;
}
}else{
switch(sqlFieldType){
case 'STRING':
strSql=strSql+", "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
break;
case 'DATE':
strSql=strSql+", "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
break;
case 'NUMBER':
strSql=strSql+", "+sqlFieldName+"="+document.getElementById(elementId).value;
break;
default:
break;
}
}
}
return strSql;
}
function checkDuplicateRecord(strTable,strWhere){
let strFalse='';
$.ajax({//检查数据库的相同记录是否存在
url:'ZTBCommon.php',
data:{
"OP":"IsExist",
"strTable":strTable,
"strWhere":strWhere
},
type:'POST',
datetype:'json',
async:false,
success:function (data) {
if(data=='YES'){
strFalse="该记录在数据库中已经存在!";
}
}
});
return strFalse;
}
function checkElementIsEmptyOrNull(ElementId){
let sTemp='';
sTemp=document.getElementById(ElementId).value.trim();
if( sTemp.trim()=='' || sTemp==null || sTemp==undefined){
return '空';
}else{
return '';
}
}
function beforeSubmitWord(){
let strFalse='';
let sTemp='';
sTemp=checkElementIsEmptyOrNull('DcWord2');
if(sTemp=='空'){ strFalse="分类名称不能为空!"; }
sTemp=checkElementIsEmptyOrNull('DcWord3');
if(sTemp!=''){ strFalse=strFalse+"标识名称不能为空!"; }
sTemp=checkElementIsEmptyOrNull('DcWord4');
if(sTemp!=''){ strFalse=strFalse+"没有上传文件!"; }
return strFalse;
}
function beforeSubmitLongText(){
let strFalse='';
let sTemp='';
sTemp=checkElementIsEmptyOrNull('DcLongText2');
if(sTemp=='空'){ strFalse="分类名称不能为空!"; }
sTemp=checkElementIsEmptyOrNull('DcLongText3');
if(sTemp=='空'){ strFalse="标识名称不能为空!"; }
if(selectType!='列表'){
sTemp=checkElementIsEmptyOrNull('DcLongText4');
if(sTemp=='空'){ strFalse="请输入具体值!"; }
}
return strFalse;
}
function refreshTable(){
table.render({
elem: '#currentTableId',
url: 'ZTBStyleTableFormStep.php',
method:'POST',
where:{"OP":"列表","selectType":selectType},
toolbar: '#toolbarDemo',
defaultToolbar: [''],
height:'523px',
width:'600px',
cols: [[
{type: 'radio', width: 80, title: '选择'},
{field: 'c01', width: 100, title: '样式类型', hide:true},
{field: 'c02', width: 200, title: '分类名称'},
{field: 'c03', width: 160, title: '标识名称'},
{field: 'c04', width: 160, title: '具体值'},
{field: 'c05', width: 160, title: '特殊符号', hide:true},
{field: 'c06', width: 80, title: '排序号'},
{field: 'c07', width: 120, title: '说明'}
]],
limits: [10],
limit: 10,
page: true,
even: true,
skin: 'line',
done: function (res, curr, count) {
//标识不可操作的行
for (let i=0;i<res.data.length;i++){
if(res.data[i]['c02']==res.data[i]['c03']){
$(".layui-table tr[data-index="+i+"] input[type='radio']").prop('disabled',true);
$(".layui-table tr[data-index="+i+"] input[type='radio']").addClass('layui-btn-disabled');
$(".layui-table tr[data-index="+i+"] input[type='radio']").next().css("cursor","not-allowed");
$(".layui-table tr[data-index="+i+"] ").css("background-color","#E0E0E0");
$(".layui-table tr[data-index="+i+"] ").css("color","#9f9696");
}
}
}
});
document.getElementById("lbl_1").innerText=selectType;
}
step.render({
elem: '#stepForm',
filter: 'stepForm',
width: '100%', //设置容器宽度
stepWidth: '750px',
height: '650px',
stepItems: [{
title: '选择样式类型'
}, {
title: '选择操作'
}, {
title: '完成维护'
}]
});
form.on('radio(selectType)',function(data){
selectType=data['value'];
refreshTable();
return false;
})
form.on('submit(formStep1)', function (data) {
refreshTable();
step.next('#stepForm');
return false;
});
form.on('submit(formStepAdd)', function (data) {//点击新增
OP='新增'
$('#frmWord').hide();
$('#frmLongText').hide();
if(selectType=='Word文件'){
document.getElementById("DcWord1").value=selectType;
document.getElementById("DcWord2").value='';
document.getElementById("DcWord3").value='';
document.getElementById("DcWord4").value='';
document.getElementById("DcWord6").value='';
document.getElementById("DcWord7").value='';
$('#frmWord').show();
}
if(selectType=='列表' || selectType=='二选一' || selectType=='长文本'){
document.getElementById("DcLongText1").value=selectType;
document.getElementById("DcLongText2").value='';
document.getElementById("DcLongText3").value='';
document.getElementById("DcLongText4").value='';
document.getElementById("DcLongText5").value='';
document.getElementById("DcLongText6").value='';
document.getElementById("DcLongText7").value='';
$('#frmLongText').show();
}
step.next('#stepForm');
return false;
});
form.on('submit(formStepUpdate)', function (data) {//点击修改
OP='修改'
$('#frmWord').hide();
$('#frmLongText').hide();
if(selectType=='Word文件'){
document.getElementById("DcWord1").value=selectType;
document.getElementById("DcWord2").value=selectRowObj['data']['c02'];
document.getElementById("DcWord3").value=selectRowObj['data']['c03'];
document.getElementById("DcWord4").value=selectRowObj['data']['c04'];
document.getElementById("DcWord5").value=selectRowObj['data']['c05'];
document.getElementById("DcWord6").value=selectRowObj['data']['c06'];
document.getElementById("DcWord7").value=selectRowObj['data']['c07'];
$('#frmWord').show();
}
if(selectType=='列表' || selectType=='二选一' || selectType=='长文本'){
document.getElementById("DcLongText1").value=selectType;
document.getElementById("DcLongText2").value=selectRowObj['data']['c02'];
document.getElementById("DcLongText3").value=selectRowObj['data']['c03'];
document.getElementById("DcLongText4").value=selectRowObj['data']['c04'];
document.getElementById("DcLongText5").value=selectRowObj['data']['c05'];
document.getElementById("DcLongText6").value=selectRowObj['data']['c06'];
document.getElementById("DcLongText7").value=selectRowObj['data']['c07'];
$('#frmLongText').show();
}
step.next('#stepForm');
return false;
});
form.on('submit(formStepDel)', function (data) {
// 删除
if(selectRowObj){
layer.confirm('确定要删除这条记录吗?', function (index) {
$.ajax({
url:'ZTBStyleTableFormStep.php',
data:{
"OP":"删除",
"c01":selectRowObj['data']['c01'],
"c02":selectRowObj['data']['c02'],
"c03":selectRowObj['data']['c03']
},
type:'POST',
async:false,
success:function (data) {
console.log(data);
if(data['data']=='OK'){
//刷新表格
$(".layui-laypage-btn")[0].click();
}else{
layer.msg('删除记录失败!',{time:3000,icon:5});
}
},
error:function(data){
console.log("错误:"+data);
}
});
layer.close(index);
})
}
return false;
});
form.on('submit(formStepSave)', function (data) {//点击保存
var canContinue=true;
var strFalse="";
strFalse=beforeSubmitWord();//检查是否可以提交
if(strFalse==''){
if(selectType=='Word文件'){
if(OP=='新增'){
strFalse=checkDuplicateRecord('StyleTable',"c01='"+document.getElementById('DcWord1').value+"' and c02='"+document.getElementById('DcWord2').value+"' and c03='"+document.getElementById('DcWord3').value+"'")
if(strFalse==''){//提交数据
let wordFile = document.getElementById('readFile');
//用FormData对象对表单数据进行封装
const fd = new FormData();//FormData构造器接收的是一个form的DOM对象
fd.append("wordFile",wordFile.files[0]);//Word文件数据
fd.append("c01",$('#DcWord1').val());//大类
fd.append("c02",$('#DcWord2').val());//分类名称
fd.append("c03",$('#DcWord3').val());//标识名称
fd.append("c04",$('#Dc04').val());//文件名称
fd.append("c05",$('#Dc05').val());//文件后缀
fd.append("c06",$('#Dc06').val());//排序号
fd.append("c07",$('#Dc07').val());//备注
fd.append("selectType","WORD文件");
fd.append("OP","新增");
$.ajax({
url: 'ZTBStyleTableFormStep.php',
type: "POST",
data: fd,
dataType: "JSON",
async: true,
processData: false,//设置为false,JQuery则不对数据进行序列化
contentType: false,//设置为false,JQuery则不设Content-Type请求头
beforeSend: function(xhr){},
complete: function(xhr,status){},
error: function(xhr,status,error){
console.log(xhr);
console.log(status);
console.log("error:"+error);
},
success: function(result){
//回退
}
});
}else{
layer.msg(strFalse,{time:3000,icon:5});
}
}
if(OP=='修改'){
//判断数据是否更改
let strUpdate='';
let wordFile = document.getElementById('readFile');
//用FormData对象对表单数据进行封装
const fd = new FormData();//FormData构造器接收的是一个form的DOM对象
strUpdate=generateUpdateSql(strUpdate,'c02','STRING','DcWord2',selectRow['data']['c02']);
strUpdate=generateUpdateSql(strUpdate,'c03','STRING','DcWord3',selectRow['data']['c03']);
strUpdate=generateUpdateSql(strUpdate,'c04','STRING','DcWord4',selectRow['data']['c04']);
strUpdate=generateUpdateSql(strUpdate,'c05','STRING','DcWord5',selectRow['data']['c05']);
strUpdate=generateUpdateSql(strUpdate,'c06','STRING','DcWord6',selectRow['data']['c06']);
strUpdate=generateUpdateSql(strUpdate,'c07','STRING','DcWord7',selectRow['data']['c07']);
if(document.getElementById("DcWord4").value != selectRow['data']['c04']){
fd.append("UpdateWordFile",'YES');//更新Word文件
fd.append("wordFile",wordFile.files[0]);//Word文件数据
}
if(strUpdate !=''){
fd.append("OP",'修改');
fd.append("selectType",selectType);
fd.append("strUpdate",strUpdate);
fd.append("strWhere","c01='"+selectRow['data']['c01']+"' and c02='"+selectRow['data']['c02']+"' and c03='"+selectRow['data']['c03']+"'");
$.ajax({
url: 'ZTBStyleTableFormStep.php',
type: "POST",
data: fd,
dataType: "JSON",
async: true,
processData: false,//设置为false,JQuery则不对数据进行序列化
contentType: false,//设置为false,JQuery则不设Content-Type请求头
beforeSend: function(xhr){},
complete: function(xhr,status){},
error: function(xhr,status,error){
console.log(xhr);
console.log(status);
console.log("error:"+error);
},
success: function(result){
//回退
}
});
}else{
layer.msg('没有需要更新的数据!',{time:3000,icon:5});
}
}
}
if(selectType=='列表' || selectType=='二选一' || selectType=='长文本'){
if(OP=='新增'){
strFalse=checkDuplicateRecord('StyleTable',"c01='"+document.getElementById('DcWord1').value+"' and c02='"+document.getElementById('DcWord2').value+"' and c03='"+document.getElementById('DcWord3').value+"'")
if(strFalse==''){//提交数据
$.ajax({
url:'ZTBStyleTable.php',
data:{
"OP":"新增",
"selectType":selectType,
"c01":document.getElementById("Dc01").value,
"c02":document.getElementById("Dc02").value,
"c03":document.getElementById("Dc03").value,
"c04":document.getElementById("Dc04").value,
"c05":document.getElementById("Dc05").value,
"c06":document.getElementById("Dc06").value,
"c07":document.getElementById("Dc07").value,
"c08":'',
},
type:'POST',
async:true,
success:function (JsonData) {
if(JsonData['data']!='OK'){
layer.msg('新增记录失败!',{time:3000,icon:5});
}
}
});
}else{
layer.msg(strFalse,{time:3000,icon:5});
}
}
if(OP='修改'){
//判断数据是否更改
var strUpdate='';
strUpdate=generateUpdateSql(strUpdate,'c02','STRING','DcWord2',selectRow['data']['c02']);
strUpdate=generateUpdateSql(strUpdate,'c03','STRING','DcWord3',selectRow['data']['c03']);
strUpdate=generateUpdateSql(strUpdate,'c04','STRING','DcWord4',selectRow['data']['c04']);
strUpdate=generateUpdateSql(strUpdate,'c05','STRING','DcWord5',selectRow['data']['c05']);
strUpdate=generateUpdateSql(strUpdate,'c06','STRING','DcWord6',selectRow['data']['c06']);
strUpdate=generateUpdateSql(strUpdate,'c07','STRING','DcWord7',selectRow['data']['c07']);
if(strUpdate!=''){
$.ajax({
url: 'ZTBStyleTableFormStep.php',
type: "POST",
data: {
"strUpdate":strUpdate,
"strWhere":"c01='"+selectRow['data']['c01']+"' and c02='"+selectRow['data']['c02']+"' and c03='"+selectRow['data']['c03']+"'"
},
dataType: "JSON",
async: true,
success: function(result){
//回退
}
});
}else{
layer.msg('没有需要更新的数据!',{time:3000,icon:5});
}
}
}
}else{
layer.msg(strFalse,{time:3000,icon:5});
}
return false;
});
$('.pre').click(function () {
step.pre('#stepForm');
});
$('.next').click(function () {
step.next('#stepForm');
});
//监听表格单选框选择
table.on('radio(currentTableFilter)', function (obj) {
selectRowObj=obj;
});
})
</script>
</body>
</html>