demo.html 4.74 KB
<div id="list" class="page out" data-title="列表插件">
	<div id="list-header"></div>
	<div id="list-a"></div>
</div>
<script>
require(["NavHeader", "List"], function(NavHeader, List) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

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

	new List({
		el: "list-a",
		option: {
			sourceid : 44,//表单建模查询id
			pageSize : !hasClsPicker ? 10 : 1,
			normalview : {
				imgfield : {fieldid : 6544, fielddesc : "图片上传"},
				titlefield : {fieldid : 6528, fielddesc : "单行文本框"},
				otherfields : [
					[{fieldid : 6534, fielddesc : "人力资源浏览框"}],
					[{fieldid : -1, fielddesc : "{rlzyllk}"}]           
				]
			},
			largeview: {
				imgfield : {fieldid : 6544, fielddesc : "图片上传"},
				titlefield : {fieldid : 6528, fielddesc : "单行文本框"},
				otherfields : [
					[{fieldid : 6534, fielddesc : "人力资源浏览框"}],
					[{fieldid : -1, fielddesc : "{rlzyllk}"}],
					[{fieldid : -1, fielddesc : "{dxwb}"}],
					[{fieldid : -1, fielddesc : "{d1.mx1dxwb}"}]
				]
			},
			switchview: {
				switchOn: true,
				defaultView: 'normal' //normal large两种模式
			},
			swipe: {
				content : [
					'<div class="btnContainer">',
						'<div class="btnContainerInner">',
							'<div class="btnBox" data-action="edit" style="background-color:#99b433">编辑</div>',
							'<div class="btnBox" data-action="delete" style="background-color:#de0000">删除</div>',
							'<a class="btnBox" style="background-color:#da532c" href="tel:{tel}">',
							'<img src="/mobilemode/piclibrary/icon4/swipetel_wev8.png"/></a>',
							'<a class="btnBox" style="background-color:#e3a21a" href="sms:{tel}">',
							'<img src="/mobilemode/piclibrary/icon4/swipesms_wev8.png"/></a>',
							'<a class="btnBox" style="background-color:#9f00a7" href="mailto:{email}">',
							'<img src="/mobilemode/piclibrary/icon4/swipemailto_wev8.png"/></a>',
						'</div>',
					'</div>'
	  			].join(''),
	 			click : function(data){
	 				var that = $(this);
	 				var action = that.attr("data-action");
	 				if("edit" == action){
	 					Mobile_NS.msg("编辑数据id为"+data.id+"的数据");
	 				}
	 				if("delete" == action){
	 					Mobile_NS.msg("删除数据id为"+data.id+"的数据");
	 				}
	 			}
			},
			normalSearch: {
				hide: false,		//是否隐藏查询
				tip: "搜你所想",
				fields: [			//指定查询列,支持id和name两个属性,若传明细表字段名称需加上前缀d1,如d1.name
					{id: 6528, name : "dxwbk"},
					{name : "rlzyllk"},
					{name : "d1.mx1dxwb"}
				]
			},
			advancedSearch : {
				enable: true,
				title : "高级查询",
				fields : [//高级检索
	           		{field:"dxwbk",showname:"单行文本框"},
	        		{field:"dxwb",showname:"多行文本"},
	        		{field:"rlzyllk",showname:"人力资源浏览框"},
	        		{field:"rqllk",showname:"日期浏览框"},
	        		{field:"sjllk",showname:"时间浏览框"},
	        		{field:"xzk",showname:"选择框"},
	        		{field:"checkk",showname:"check框"}
				]
			},
			options: {
				readonly : false,	//是否数据只读
				showOnePage: false,	//显示一页,默认为false
				selectable: false	//选择列表
			},
			btns : [
				{
					text : "新建",
					click : function(){
						Mobile_NS.msg("点击新建按钮");
					}
				}
			],
			callback: {
				click : function(data){
					console.log(data);
					//$u("/mobilemode/mobile/demo/plugin/List/detail.html?billid="+data["id"], true);
				}
			},
			dataload: function() {
				if (!hasClsPicker) return;

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

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

				new clsPicker({
					selector: "li .wev-media-object.wev-pull-left",
					text: ".wev-media-object",
					lineYSkew: 80,
					angle: 80,
					height: 300,
					position: "bottom right"
				});
				new clsPicker({
					selector: "li .wev-ellipsis",
					text: ".wev-ellipsis",
					skew: [50, ""],
					angle: 80,
					lineYSkew: 50,
					height: 300,
					position: "bottom right"
				});

				new clsPicker({
					selector: ".wev-table-view-cell",
					text: ".wev-table-view-cell",
					skew: [1.1, 10],
					angle: 80,
					lineYSkew: 30,
					position: "bottom left"
				});

				new clsPicker({
					selector: ".wev-search",
					skew: [8, ""],
					lineYSkew: 100
				});
				new clsPicker({
					selector: ".wev-search-inner",
					skew: [3, ""],
					lineYSkew: 70
				});

				new clsPicker({
					selector: ".wev-small-icon",
					skew: ["", 2],
					lineYSkew: 55
				});
				new clsPicker({
					selector: ".btn:last-child",
					text: ".btn"
				});
			}
		}
	}).render();
});
</script>