<div id="urlgridtable" class="page out" data-title="URL表格插件">
	<div id="urlgridtable-header"></div>
	<div id="urlgridtable-a"></div>
</div>
<script>
require(["NavHeader", "UrlGridTable"], function(NavHeader, UrlGridTable) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if(!hasClsPicker) {
		new NavHeader({
			el: "urlgridtable-header",
			option: {
				title:"URL表格插件", 
				smallTitle:"urlgridtable"
			}
		}).render();
	}

	new UrlGridTable({
		el: "urlgridtable-a",
		option : {
			url : "/mobilemode/mobile/demo/plugin/UrlGridTable/data.jsp",
			pageSize : 5,
			showFields : [
				{title:"公司名称", value:"<span style=\"color:rgba(0,0,0,.65);\">{name}</span>", width:"100"},
				{title:"预算科目", value:"{catogary}", width:"80"},
				{title:"一季度", value:"{first}", width:"80"},
				{title:"二季度", value:"{second}", width:"80"},
				{title:"三季度", value:"{third}", width:"80"},
				{title:"四季度", value:"{fourth}", width:"80"}
			],
			normalSearch: {
				hide: false,		//是否隐藏查询
				tip: "请输入关键字"
			},
			btns : [
				{
					text : "新建", 
					click : function(){
						alert("点击新建");
					}
				}
			],
			options: {
				fixedColumn : 1,	//锁定列数
				width : "100%",
				height : 300,
				groupsum : true,	//分组合计
				readonly : false	//是否数据只读
			},
			callback: {
				click : function(data){
					var dataid = data.id;
					$u("/mobilemode/mobile/demo/plugin/UrlGridTable/detail.html?billid="+dataid, true);
				}
			}
		}
	}).render().then(function () {
		if (!hasClsPicker) return;

		_u.vetically("#urlgridtable-a");

		clsPicker.golalSetting({
			container: ".wev-comp-UrlGridTable",
			type: "UrlGridTable"
		});

		setTimeout(() => {
			new clsPicker({
				selector: ".wev-search",
				text: ".wev-search",
				lineYSkew: 75,
				skew: [20, ""],
				position: "top right"
			});
			new clsPicker({
				selector: ".wev-placeholder-inner",
				text: ".wev-placeholder-inner",
				lineYSkew: 45,
				skew: [10, ""],
				position: "top right"
			});
			new clsPicker({
				selector: ".wev-gridtable-content-wrapper table>thead>tr>th",
				text: " ",
				lineYSkew: 15,
				position: "top right"
			});

			new clsPicker({
				selector: ".btn",
				text: ".btn",
				lineYSkew: 15,
				position: "top left"
			});

			new clsPicker({
				selector: ".wev-more-btn",
				text: ".wev-more-btn",
				lineYSkew: 20,
				height: 90
			});
		}, 100);
	});
});
</script>