静安乡村民宿
/
Homestay_app_houtai


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
							<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 导入公共样式 -->
    <%@ include file="ap.jsp" %>
    <title>款式列表</title>
</head>
<body id="body">
<div data-toggle="topjui-layout" data-options="fit:true">
    <div data-options="region:'center',iconCls:'icon-reload',title:'',split:true,border:false,bodyCls:'border_left_right'">
        <!-- datagrid表格 -->
        <table data-toggle="topjui-datagrid"
               data-options="id:'userDg',
               		singleSelect:true,
					selectOnCheck:false,
					checkOnSelect:false,
                    url:'stylegetStyles.action',
                    childTabs: [{id:'eastTabs'}],
                    filter: [{
                        field: 'userName',
                        type: 'textbox',
                        op: ['contains', 'equal', 'notequal', 'less', 'greater']
                    },{
                        field: 'sex',
                        type: 'combobox',
                        options: {
                            valueField: 'value',
                            textField: 'label',
                            data: [{
                                label: '男',
                                value: '1'
                            }, {
                                label: '女',
                                value: '2'
                            }]
                        },
                        op: ['contains', 'equal', 'notequal', 'less', 'greater']
                    },{
                        field: 'post',
                        type: 'combobox',
                        options: {
                            valueField: 'value',
                            textField: 'label',
                            multiple: true,
                            data: [{
                                label: 'CEO',
                                value: 'CEO'
                            }, {
                                label: 'COO',
                                value: 'COO'
                            }, {
                                label: 'CTO',
                                value: 'CTO'
                            }]
                        },
                        op: ['contains', 'equal', 'notequal', 'less', 'greater']
                    }]">
            <thead>
            <tr>
                <th data-options="field: 'id', title: 'id', checkbox: true"></th>
                <th data-options="field: 'style_name', title: '款式名称', sortable: true"></th>
                <th data-options="field: 'style_t_id', title: '工序', sortable: true,
                formatter:function(value,row,index){
                	if(value!=''){
                		var b = value.split(',');
                		//console.info(b.length);
                		return '绑定了  '+b.length+'  道工序';
                	}
                	return '<font color=\'orange\'>没有绑定任何工序</font>';
                }"></th>
                <th data-options="field:'fbDetails',title:'操作',formatter:operateFormatter"></th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<!-- 表格工具栏开始 -->
<div id="userDg-toolbar" class="topjui-toolbar"
     data-options="grid:{
           type:'datagrid',
           id:'userDg'
       }">
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'openDialog',
       extend: '#userDg-toolbar',
       iconCls: 'fa fa-plus',
       dialog:{
           width: 1050,
           height: 550,
           id:'userAddDialog',
           href:'add_style.jsp',
           buttonsGroup:[
               {text:'保存',url:'styleaddStyle.action',iconCls:'fa fa-plus',handler:'ajaxForm',btnCls:'topjui-btn-brown'}
           ]
       }">新增款式</a> 
     <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method: 'openDialog',
            extend: '#userDg-toolbar',
            iconCls: 'fa fa-pencil',
            btnCls: 'topjui-btn-green',
            grid: {
                type: 'datagrid',
                id: 'userDg'
            },
            dialog: {
                width: 850,
                height: 570,
                url: 'stylefindByid.action?id={id}',
                href:'add_style.jsp?id={id}',
                buttonsGroup: [
                    {  text:'新增',url:'styleaddStyle.action',iconCls:'fa fa-plus',handler:'ajaxForm',btnCls:'topjui-btn-brown' },
                    {  text:'更新',url:'styleupdateStyle.action',iconCls:'fa fa-save', handler:'ajaxForm',btnCls:'topjui-btn-green' }
                ]
            }">编辑款式</a>
   
   <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'doAjax',
       extend: '#userDg-toolbar',
       btnCls:'topjui-btn-brown',
       iconCls:'fa fa-trash',
       url:'styledeleteStyle.action',
       grid: {uncheckedMsg:'请先勾选要删除的数据',param:'id:id'}">删除款式</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'search',
       extend: '#userDg-toolbar',
       btnCls:'topjui-btn-blue'">查询</a> 
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'filter',
       extend: '#userDg-toolbar',
       btnCls:'topjui-btn-black'">过滤</a>
    </div>
<!-- 表格工具栏结束 -->
</body>
<script>
	function operateFormatter(value, row, index) {
        var htmlstr = '<button class="layui-btn layui-btn-xs" onclick="openEditColor(1,\'' + row.id + '\')">绑定颜色</button>';
        return htmlstr;
    }
    function openEditColor(n,id){
    	var $editDialog = $('<form  id="myDialog" method="get"></form>'); // 创建form表单元素
        $editDialog.iDialog({
            title: '编辑数据',
            width: 950,
            height: 500,
            closed: false,
            cache: false,
            href: "style_size.jsp?id="+id,
            modal: true,
            buttons: [{
                text: '保存',
                iconCls: 'fa fa-save',
                btnCls: 'topjui-btn-blue',
                handler:ajaxSubmit // 调用下面自定义方法ajaxSubmit()
            }, {
                text: '关闭',
                iconCls: 'fa fa-close',
                btnCls: 'topjui-btn-red',
                handler: function () {
                    $editDialog.iDialog('close');
                }
            }],
            onLoad: function () {
                //加载表单数据
                $.getJSON('sizeCfindStyleSizeColor.action?type='+n+'&id='+id, function (data) {
                	
                    $editDialog.form('load', data.style);
                    //console.info(data);
                    var colors = data.colors;
                   	var sizes = data.sizes;
					var daima="";
					var ssize = data.style.size_id.split(",");
					var scolor = data.style.color_id.split(",");
					//console.info(ssize);
					//console.info(scolor);
					var j = 0;
					for(var i=0;i<colors.length;i++){
	        			var sc = colors[i];
	        			if(sc.id== parseInt(scolor[j])){
	        			console.info();
	        				daima+="<div class=\"filtr-item\" data-category=\"10\"><input class=\"color\" type=\"checkbox\" checked name=\"color_id\" value=\""+sc.id+"\" data-labelauty=\""+sc.detail+"\"></div>";
	        				j++;
	        			}else{
	        				daima+="<div class=\"filtr-item\" data-category=\"10\"><input class=\"color\" type=\"checkbox\" name=\"color_id\" value=\""+sc.id+"\" data-labelauty=\""+sc.detail+"\"></div>";
	        			}
	        		}
	        		document.getElementById("jq22").innerHTML=daima;
	        		$('.color').labelauty();
	        		$('#jq22').filterizr();
	        		daima="";
	        		j=0;
	        		for(var i=0;i<sizes.length;i++){
	        			var sc = sizes[i];	
	        			//console.info(sc.id);
	        			//console.info(parseInt(ssize[j]));																									
	        			if(sc.id==parseInt(ssize[j])){
	        				daima+="<div class=\"filtr-item\" data-category=\"10\"><input class=\"size\" type=\"checkbox\" checked name=\"size_id\" value=\""+sc.id+"\" data-labelauty=\""+sc.detail+"\"></div>";
	        				j++;
	        			}else{
	        				daima+="<div class=\"filtr-item\" data-category=\"10\"><input class=\"size\" type=\"checkbox\" name=\"size_id\" value=\""+sc.id+"\" data-labelauty=\""+sc.detail+"\"></div>";
	        			}
	        		}
	        		document.getElementById("jq221").innerHTML=daima;
	        		$('.size').labelauty();
	        		$('#jq221').filterizr();
                });
                
            }
        });
    }
    
     function ajaxSubmit() {

        // 2 提交
        // 2.1 方式一 上面 $('<form ></form>')
        /* if($('#myDialog').form('validate')) {
            var formData = $("#myDialog").serialize();
            var url = _ctx + '/json/response/success.json';
            $.post(url,formData,function (res) {
                if (res.statusCode == 200) { // 后台返回状态值
                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
                    $("#productDg").iDatagrid('reload');// 刷新下表格数据
                    $('#myDialog').dialog('destroy');// 销毁dialog面板
                } else {
                    $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
                }
            },'JSON')
        } */
        //2.2 方式二
         $.iMessager.progress({'text': '请求中……'});  // 显示进度条（提交时请使用进度条 或者 禁用'提交'按钮，防止因为网络延迟用户重复提交）
         $('#myDialog').iForm('submit', {
       	     url: _ctx + 'styleupdateStyle.action?biao=1',
             onSubmit: function (param) {  /* param.p1 = 'param 用于提交额外的参数';*/
                 var isValid = $(this).iForm('validate'); //  提交数据表单数据时进行表单验证
                 if (!isValid) {
                     $.iMessager.progress('close');  // 如果表单是无效的则隐藏进度条
                 }
                 return isValid;    // 返回false终止表单提交
             },
             success: function (res) {
                 var data = JSON.parse(res); // 字符串格式JSON 转换成 对象格式JSON
                 setTimeout(function () { // 模拟请求延迟3秒（使用的时候请自行去掉）
                     if (data.statusCode == 200) { // 后台返回状态值
                         $.iMessager.show({title: '我的消息', msg: data.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
                         $("#productDg").iDatagrid('reload');// 刷新下表格数据
                         $('#myDialog').dialog('destroy');// 销毁dialog面板
                     } else {
                         $.iMessager.show({title: '我的消息', msg: data.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
                     }
                     $.iMessager.progress('close');  // 如果提交完成则隐藏进度条
                 }, 3000);
             }
         });
     } 
    function openEditSize(b){
    
    }
</script>
</html>