#@main(attr.getItem("currentMenuName"))

#define content()
<section class="content container-fluid">
	
	#if(msg)
	<div class="alert alert-success alert-dismissible">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	<p>#(msg)</p></div>
	#end
	
	<div class="row">
		<div class="col-md-3">
			<div class="box box-info">
				<div class="box-header with-border">
					<h3 class="box-title">网站栏目</h3>
					<div class="box-tools">
						<button class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body no-padding">
					<ul class="tree-list"></ul>
				</div>
			</div>
		</div>
		<div class="col-md-9">
			<div id="dataTable"></div>
		</div>
	</div>
</section>
#end

#define after()
<script>
require(['ez-datagrid', 'kit'], function(Grid, Kit){
	
	var rootJson = #(EJson.toJson(indexChannel));
	var nodesJson = #(EJson.toJson(channels));
	var currentId = '#(pid)';
	var datagrid;
	var getSubNodes = function(){
		var nodes = [];
		nodesJson.forEach(node => {
			if(node.pid === currentId) nodes.push(node);
		});
		return nodes;
	}
	var initNodeTree = function(){
		var box = $(".tree-list");
		var rootLi = currentId == rootJson.id ? $("<li class='active'>") : $("<li>");
		box.append(rootLi);
		$("<a href='javascript:void(0)' data-id='" + rootJson.id + "'>" + rootJson.caption + "</a>").on("click", chgNode).appendTo(rootLi);
		nodesJson.forEach(node => {
			var li = currentId == node.id ? $("<li class='active'>") : $("<li>");
			box.append(li);
			var level = node.path.split("_").length * 10 + 15;
			$("<a href='javascript:void(0)' data-id='" + node.id + "' style='padding-left:" + level + "px'>" + node.caption + "</a>").on("click", chgNode).appendTo(li);
		});
		$("#nodeCaption").text(rootJson.caption);
		initNodeGrid();
	}
	var chgNode = function(){
		var me = $(this);
		currentId = me.data("id");
		$(".tree-list li.active").removeClass("active");
		me.parent().addClass("active");
		$("#nodeCaption").text(me.parent().text());
		datagrid.update(getSubNodes());
	}
	
	var initNodeGrid = function(){
		var opts = {
			container: '#dataTable'
			, data: getSubNodes()
			, title: '下级栏目'
			, columns: [{
	            field: 'caption'
	            , title: '栏目名称'
	            , required: true
				, placeholder: '栏目名称'
			},{
            	field: 'code'
	            , title: '栏目别名'
		        , width: 120
	            , required: true
				, placeholder: '请填写英文格式，且不允许出现重复'
    		},{
            	field: 'channelTemp'
   	            , title: '栏目模板'
   		        , required: true
				, defaultValue: 'channel.html'
				, placeholder: '请确保模板文件带有.html后缀'
       		},{
               	field: 'contentTemp'
   	            , title: '内容模板'
   		        , required: true
				, defaultValue: 'content.html'
				, placeholder: '请确保模板文件带有.html后缀'
       		},{
            	field: 'icon'
   	            , title: '栏目图标'
   			    , width: 80
   			    , align: 'center'
			    , formatter: function(value, row){
			    	if(Kit.notEmpty(value)) return '<i class="' + value + '"></i>'; else return ''
			    }
				, placeholder: '例如：Glyphicons图标'
       		},{
               	field: 'pic'
   	            , title: '栏目图片'
			    , visible: false
			    , type: 'file'
			},{
	            field: 'subCaption'
	            , title: '栏目描述'
				, placeholder: '栏目描述'
       		},{
            	field: 'content'
   	            , title: '栏目内容'
			    , visible: false
			    , type: 'html'
       		}]
			, btnAdd: { callback: function(params){ return '#(attr.ctrl)/addChannel?pid=' + currentId } }
			, btnModify: { callback: function(params, row){ return '#(attr.ctrl)/modifyChannel?pid=' + currentId } }
			, btnRemove: { callback: function(params, rows){ return '#(attr.ctrl)/removeChannel?pid=' + currentId + '&ids=' + Kit.getFields(rows, 'id').join(',') } }
			, btnSortUp: { used: true, callback: function(params, rows){ return '#(attr.ctrl)/sortChannel?pid=' + currentId + '&opt=up&ids=' + Kit.getFields(rows, 'id').join(',') } }
			, btnSortDown: { used: true, callback: function(params, rows){ return '#(attr.ctrl)/sortChannel?pid=' + currentId + '&opt=down&ids=' + Kit.getFields(rows, 'id').join(',') } }
		}
		Grid.load(opts, function(dg){
			datagrid = dg;
		});
	}
	
	initNodeTree();
	
});
</script>
#end