GT-Grid入坑记

GT-Grid入坑记

主要内容：UI控件的引入+Button按钮+artDialog弹出层+ajax+Table表格+Form表单+参考源码链接。

前言：GT-Grid好坑，接手了个老项目，刚开始一脸懵逼，全靠摸索。关于表格，可以直接参考http://fins.iteye.com/blog/214290,这个算是半个官网吧。

(1) UI控件的引入

<ui:Include tags="artDialog,Select,FileUpload,zTree">ui:Include>

<ui:FileUpload width="196px" onUploadSuccess="finish"  path="${savePath}" id="myFile" fileTypeExts="*.jpg" fileSizeLimit="10240">ui:FileUpload>

---

(2) Button按钮的标，btnType属性控制

<ui:Button btnType="query" onClick="query()">查询ui:Button>
<ui:Button btnType="add" onClick="javascript:addChannel()">新增ui:Button>
<ui:Button btnType="edit" onClick="javascript:updateChannel();">修改ui:Button>
<ui:Button btnType="delete" onClick="javascript:deleteChannel()">删除ui:Button>
<ui:Button btnType="save" onClick="saveOrUpdate();">保存ui:Button>
<ui:Button btnType="cancel" onClick="closeDialog();">取消ui:Button>

---

(3) artDialog弹出层（open+alert+confirm+取消/关闭）

// 1.引入
<ui:Include tags="artDialog"></ui:Include>


// 2.1 在函数中使用-- dialogUtil.open 弹出一个jsp页面
function(){
    dialogUtil.open(
		"shangchuan", //窗口的名字，用于取消或者关闭该窗口
		"项目介绍图片上传", //弹出层的标题
		"/times-web/pages/params/shangchuan.jsp?isZuzhi=0&projid="+records[0].PROJID, //路径
		150,400, //宽高
		function(){ //执行的函数，函数内容可为空
            reloadGrid('grid');
        }
    );
}


// 2.2 在函数中使用-- dialogUtil.alert 弹出一个提示信息框(仅提示)
function(){
    var records = getSelectedRecords('grid'); //获取选中的数据
    if(records.length!=1){
        dialogUtil.alert('只能选择一条记录进行设置！',true);
        return false;
    }
}

// 2.3 在函数中使用-- dialogUtil.confirm 弹出一个询问提示框(确定+取消)
dialogUtil.confirm(
	'确认要删除选择的记录吗？',
	function(){
		// 确认函数
	},
	function(){
		// 取消
	}
);


// 3.点击取消关闭弹窗
<ui:Button btnType="cancel" onClick="closeDialog();">取消</ui:Button>

<script>
// shangchuan 为open的时候所定义的
function closeDialog(){
	parent.art.dialog.get("shangchuan").close();
}
</script>

---

(4) ajax请求

function() {
    var saveParams = {
		IMG_NAME: postData.IMG_NAME,
		type: 'proj',
		projid: treeSeleted[1]
	}
	var serviceUrl = "${path}/com.pytech.timesgp.web.dao.AttachDao:uploadProjAttach"
	ajax.remoteCall(
	    serviceUrl, //api
	    [saveParams], //参数
	    function(reply){ //成功执行的函数
		    var data = reply.getResult(); //返回值
		    dialogUtil.alert(data.msg, function() {
    			if (data.success == true) {
    				closeDialog();
    			}
    		});
	    }
	);
}

---

(5) table表格（一）–纯JS渲染

// 1.HTML结构
<div id="grid"></div>

// 2.JS
// 2.1 表格列表参数
var columns = [{
	id: 'R_R', //id 即是接收api请求到的数据的参数名
	header: 'id', //列表名，即是列表的表头显示的文字信息
	width: 50, //列表宽
	align : 'center', //文字位置
	isCheckColumn: true //是否作为勾选框，默认为false
}, {
	id : "USERNAME",
	header: "收件人",
	width:200,
	align : 'center',
	type :'string',
	toolTip:true,
	renderer:shoujianren, //编辑表格内容，shoujianren是个函数名，函数也可以直接在这里写
}, {
	id : "EMAIL",
	header : "邮箱",
	width :300,
	editor: { type:"text",validRule:['R','email'] }, //直接编辑表格,email是数据类型
	align : 'center',
	type :'string',
	toolTip:true
}];
/*
延伸 - 关于可输入表格编辑
	{ type :'text', validRule:['R','email'] }, // email格式
	{ type :'text', validRule:['R','I'] },     // 正整数
	{ type :'text', validRule:['R','float'] }, // 小数
	此外：integer(整数)  email(电子邮件地址)   money(金钱,最多两位小数的数字)  enchar(英文字符串) 
date(YYYY-MM-DD格式的日期)    ,time(HH:mm:ss格式的时间)   , datetime(YYYY-MM-DD HH:mm:ss格式的日期时间) 

	{ type :'select', options : {'0': '否' , '1':'是'} }, //下拉选择框
*/

/*
延伸 - 关于可编辑表格的获取以及传值
{
	id : "valuesId", //对应后台的字段值，当`spparamsp`字段值不存在时候,传参取值也为该值
	header : "推荐时间批量修改",
	width : 350,
	headAlign:'left',
	align : 'center',
	type :'string',
	toolTip:true,
    spparamsp: 'valuesParams',//传参取值，可不写。当取值和传值字段值不一样的时候才需要到他。
    editor: { type:"text",validRule:['R','float'] }
}
*/



// 2.2 渲染函数配置
loadGrid(
    'grid', //div的id
	path+'/com.pytech.timesgp.web.query.EmailQuery', //查询api
	columns, //定义的列表参数
	parameters, //查询的参数
	{
		singleSelect: true, //是否可多选
		autoLoad:true, //加载
		toolbarContent:false, //是否显示分页
		// toolbarPosition : 工具栏的位置. 可选值:'top'/'bottom'/null,  暂时不支持上下都显示.默认值：bottom  
		afterEdit: function(value, oldValue, record, col, grid) {
			// 直接编辑表格的函数(注：编辑完成后触发)
			var paramsData = {
				projid: record.ORG_ID,
				userids: record.USERID,
				emails: record.EMAIL
			}
			// 编辑完成后触发的api
			ajax.remoteCall(
			    path+"/com.pytech.timesgp.web.dao.AttendanceDao:updateEmail",
				[paramsData],
				function(reply){
					reloadGrid('grid');
					var data = reply.getResult();
					dialogUtil.alert(data.msg,function(){
				});
			}); 
		}
	}
);

// 2.3 收件人的返回函数
function shoujianren(val, record, columnObj, grid, colNo, rowNo) {
	// val:当前字段id的值  record:当前字段id所在的整条数据
	// 该函数可以直接返回表格的内容；
	// 你可以如下定义一个button，也可以定义一个链接 或者是改变字体颜色等操作。
	var needData = record.ORG_ID + ',' + record.USERNAME
	if (val==null || val=='') {
		return '修改';
	}
	return ''
				+val+
			'修改';
}

// 2.3.1 返回函数也可以直接加上事件
function leaderRender(value, record, columnObj, grid, colNo, rowNo) {
	return ""+value;
}

---

(5) table表格（二）–纯HTML渲染

    
    <%-- 
        :
            id //id
            dataProvider //路径
            parameters //参数
            ...
            等等参数，和纯js渲染数据一样
    --%>
        
        
        
        <%-- 
        :
            id //即是接收api请求到的数据的参数名
            width //宽度
            ...
            等等参数，和纯js渲染数据一样
         --%>
    

---

(6)表单数据的赋值和取值

// 1.html结构

	

		

			
*活动范围:
			

		
		

			
*检验数据:
			

		
	


// 2.赋值
function setValue(map) {
	var params = {
		NUM: map.numValue,
		USERNAME: map.usernameValue,
	}
	reloadGrid('grid', params);
}

// 3.取值
var formData = Form.formToMap('queryForm'); //queryForm就是表单id

大概就这样吧。

---

(7) 源码

如果想看一下曾写下原本代码，请点击这里去看代码文件。估计也没人用这东西了吧，都2017年了。

老项目，真的，不要轻易去接去维护。坑啊。