前端那些些之jquery,layui,boostrap数据封装(后台系统)

数据封装与后台交互,不用表单方式

新增数据封装

//后台要的数据格式
var result = {
    name: "",
    department: [],
    resultCode: "",
    feeType: "",
    ruleInstanceExtcolumn: [],
    // modelPropertyCode: "",
    conditions: []
}
$(function () {
    //获取适用对象机构代码
    institution();
    //选择定向跳转出现下一步
    orient();
    //获取预留字段的代码
    obligates();
    //点击增加模块的实现
    bindAdd();
    //点击删除模块
    bindDelete();
    //规则类型的数据实现
    property();
    // 操作符的数据获取
    operator();
    //当下拉属性发生变化时,获取数据
    // select1();
    //表单提交实现数据
    submit();
    validate();
});

function  validate() {
    $('input[name="username"]').focus(function(){
        $(this).next().addClass('state1').text('规则名称最多255个字节');
    }).blur(function(){
        if($(this).val().length <255){
            $(this).next().text('').removeClass('state1');
        }
    });
    $(".back").click(function () {
        window.location.href="ruleConfigPage.do";
    })
}

//日历控件初始化
function timer() {
    $(".form-date").datetimepicker({
        language: 'zh-CN',//国际化语言种类
        format: "yyyy-mm-dd",//格式(项目会统一格式)
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    }).on('changeDate', function (ev) {
        var $t = $($(ev.target).attr("date-relative"));
        if ($t.size() > 0) {
            $t.datetimepicker('setStartDate', ev.date);
            if (ev.date > $t.datetimepicker('getDate')) {
                $('input', $t).val("");
            }
        }
    });
    // 移除输入框内容按钮
    $(document).on("click", ".glyphicon-remove", function () {
        $(this).parent().prev().val("");
        //$('.form-date').datetimepicker('setStartDate',new Date());
    });
}
//获取适用对象机构代码
function institution() {
    $.ajax({
        type: 'get',
        url:ApiRule.ruleDepartment,
        // url: "../../../json/institution.json",
        dataType: 'json',
        success: function (data) {
            $('select.multiselect').empty();
            $.each(eval(data), function (i, item) {
                $(
                    "<option value='" + item.code + "'>" + item.name + "</option>"
                ).appendTo($(".multiselect"));
            });

            $('.multiselect').multiselect({
//                     rebuild: 'rebuild',
                includeSelectAllOption: true,
                selectAllText: '全选',
                onChange: function (option, checked) {
                    var lists = getSelected();
                    $.each(lists, function (index, item) {
                        var temp = {
                            code: item
                        }
                        result.department.push(temp);
                    })
                }
            })
        },
        error: function (error) {
            // console.log("Error:");
            // console.log(error);
        }
    });
    //获取值
    function getSelected() {
        var selectValueStr = [];
        $(".multiselect option:selected").each(function () {
            selectValueStr.push($(this).val());
        });
        return selectValueStr;
    }

}

//选择定向跳转出现下一步
function orient() {
    // 监听规则属性
    $(".change").on("change", function () {
        var $this = $(this);
        var data = $this.val();//拿到选中项的值
        console.log(111);

        if (data == "assigned") {
            $("#section .show-btn").toggle();
        } else if (data == "random") {
            $("#section .show-btn").css("display", "none");
        }
    })
}
//获取预留字段的代码
function obligates() {
    $.ajax({
        type: "get",
        url: ApiRule.ruleColumn,
        // url: "../../../json/institution.json",
        success: function (data) {
            $('select.obligate').empty();
            $.each(eval(data), function (i, item) {
                // console.log(item);
                $(
                    "<option value='" + item.code + "'>" + item.name + "</option>"
                ).appendTo($(".obligate"));

            });
            $('.obligate').multiselect({
                placeholder: "请选择",
                onChange: function (option, checked) {
                    var lists=getSelecteds();
                    $.each(lists, function (index, item) {
                      
                        var temp = {
                           colValue:item,
                        }
                        result.ruleInstanceExtcolumn.push(temp);
                     
                    })
                }
            })

        },
        error: function () {
            layer.msg('获取预留字段接口有问题', function () {
                //关闭后的操作
            });
        }
    });

  var getSelecteds = function () {
        var selectValueStr = [];
        $(".obligate option:selected").each(function () {
            selectValueStr.push($(this).val());
        });
        return selectValueStr;
    }
}

//规则属性类型获取实现
function property() {
    $.ajax({
        url:ApiRule.ruleQuery,
        // url: '../../../json/rule-property.json',
        success: function (data) {
            $.each(eval(data), function (i, item) {
                $(
                    "<option value='" + item.modelPropertyCode + "'>" + item.name + "</option>"
                ).appendTo($(".select1"));
            });
        },
        error: function () {
            layer.msg('亲,规则属性类型接口有问题', function () {
                //关闭后的操作
            });
        }
    });
}

//获取规则属性获取
// function select1() {
//     $(".select1").on("change", function () {
//         var val = $('.select1 option:selected').val();
//         console.log(val);
//         if (val) {
//             // $.getJSON("http://10.50.111.11:9090/roadassistantclient/dictionary/query", {type: val}, function (data) {
//             $.getJSON("http:../../../json/type.json", function (data) {
//                 console.log(data);
//                 if (data) {
//                     // $(".insert .type").hide();
//                     // $(".insert .select3").show();
//                     $.each(eval(data), function (i, item) {
//                         $(
//                             "<option value='" + item.code + "'>" + item.name + "</option>"
//                         ).appendTo($(".select3"));
//                     });
//                 } else {
//                     $(".select3").toggle();
//                     $(".type").toggle();
//                 }
//             })
//         }
//     })
// }
//操作符的数据获取
function operator() {
    $.ajax({
         url:ApiRule.ruleoPerator,
        //url: '../../../json/fu.json',
        success: function (data) {
            // console.log(data);

            $.each(eval(data), function (i, item) {
                // console.log(item);
                $(
                    "<option value='" + item.operatorCode + "'>" + item.name + "</option>"
                ).appendTo($(".select2"));

            });
        },
        error: function () {
            layer.msg('亲,获取操作符接口有问题', function () {
                //关闭后的操作
            });
        }
    });
}

//点击增加模块按钮
function bindAdd() {
    var $template = $(".template");
    var $tbody = $("#list");
    $(document).on('click', '.add', function () {
        //clone(true)是深度克隆包括事件和所有的子元素
        // var templates = template();
        $template.clone().show().removeClass("template").appendTo($tbody);
    });
}

//点击删除模块
function bindDelete() {
    $(document).on('click', '.sub', function () {
        var length = $("#list").find("li").length;
        if (length == 2) {
            return;
        } else {
            $(this).parents("li").remove();
        }
    });
}

//通用模板
// function template(data) {
//     return ' <li>' +
//         ' <div class="form-group col-sm-3">' +
//         '<label class="col-sm-6 control-label"></label>' +
//         '<div class="col-sm-6">' +
//         '<select class="form-control">' +
//         '<option value="保单类型">保单类型</option>' +
//         '</select>' +
//         ' </div>' +
//         ' </div>' +
//         ' <div class="form-group col-sm-3">' +
//         ' <label class="col-sm-2 control-label"></label>' +
//         '<div class="col-sm-10">' +
//         ' <select class="form-control">' +
//         ' </select>' +
//         ' </div>' +
//         ' </div>' +
//         ' <div class="form-group col-sm-3">' +
//         ' <label class="col-sm-2 control-label"></label>' +
//         '<div class="col-sm-10 insert">' +
//         ' <input type="text"  class="form-control type" placeholder="请输入规则类型">' +
//         ' <select class="form-control select3">' +
//         '</select>' +
//         ' </div>' +
//         ' </div>' +
//         ' <div class="form-group col-sm-3">' +
//         ' <label class="col-sm-2 control-label"></label>' +
//         ' <div class="col-sm-10">' +
//         ' <span class="add">+</span>' +
//         '<span class="sub">-</span>' +
//         ' </div>' +
//         ' </div>' +
//         ' </li>'
// }

function submit() {
    $(document).on("click", '.sel', function () {
        console.log(111);
        // debugger;
        result.name = $("#firstname1").val();
        if (result.department.length == 0) {
            layer.msg("请选择对象适用机构");
            return false;
        }
        result.feeType=$(".sle").val();

        result.resultCode=$(".change").val();
        // result.modelPropertyCode=$(".type").val();
        // if(result.ruleInstanceExtcolumn==0 ){
        //    layer.msg("请选择预留字段");
        //    return false;
        // }
        result.colName=$('select.obligate').find("option").text(),
         result.colValue=$('select.obligate').find("option").val()
        var sum = {
            propertyValue: $(".type").val(),
            operatorCode: $(".select6").val(),
            modelPropertyCode: $(".select8").val()
        }

        var list = $("#list li").not(".template");
        $.each(list, function (index, obj) {
            var temp = {};
            var $self = $(obj);
            temp.modelPropertyCode = $self.find(".select1").val();
            temp.operatorCode = $self.find(".select2").val();
            temp.propertyValue = $self.find(".type").val();
            result.conditions.push(temp);
        } )
        result.conditions.unshift(sum)
        // debugger;

        $.ajax({
            // url: 'http://10.50.111.9:8080/roadassistantclient/rulemanage/addRuleInstance',
            /*****
             * **********************************/
            url: ApiRule.ruleoInstance,
            type: 'post',
            dataType: 'json',
            data: {
                ruleInstance:JSON.stringify(result)
            },
            success: function (data) {
                console.log(data);
                window.location.href="ruleConfigPage.do";
            },
            error: function () {
                layer.msg('亲,提交数据有接口有问题', function () {
                    //关闭后的操作
                });
            }

        })

    })
}

修改页面的数据封装

//传输列表的参数
var result = {
    code: '',
    name: "",
    department: [],
    resultCode: "",
    feeType: "",
    ruleInstanceExtcolumn: [],
    // modelPropertyCode: "",
    conditions: []
}
$(function () {
    //获取适用对象机构代码
    institution();
    //获取预留字段的代码
    obligates();
    //点击增加模块的实现
    bindAdd();
    //点击删除模块
    bindDelete();
    //规则类型的数据实现
    property();
    // 操作符的数据获取
    operator();
    //当下拉属性发生变化时,获取数据
    // select1();
    //表单提交实现数据
    submit();

    $(document).on("click", "#back", function () {
        window.history.back();
    })
    //详情页面的请求
    ajax();

});

function codes() {
     var code= getParame("code");
       $("#section .code").text(code);
       return code;
   }
//日历控件初始化
function timer() {
    $(".form-date").datetimepicker({
        language: 'zh-CN',//国际化语言种类
        format: "yyyy-mm-dd",//格式(项目会统一格式)
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    }).on('changeDate', function (ev) {
        var $t = $($(ev.target).attr("date-relative"));
        if ($t.size() > 0) {
            $t.datetimepicker('setStartDate', ev.date);
            if (ev.date > $t.datetimepicker('getDate')) {
                $('input', $t).val("");
            }
        }
    });
    // 移除输入框内容按钮
    $(document).on("click", ".glyphicon-remove", function () {
        $(this).parent().prev().val("");
        //$('.form-date').datetimepicker('setStartDate',new Date());
    });
}
//获取适用对象机构代码
function institution() {
    $.ajax({
        type: 'get',
        url: ApiRule.ruleDepartment,
        // url: "../../../json/institution.json",
        dataType: 'json',
        success: function (data) {
            $('select.multiselect').empty();
            $.each(eval(data), function (i, item) {
                $(
                    "<option value='" + item.code + "'>" + item.name + "</option>"
                ).appendTo($(".multiselect"));
            });

            $('.multiselect').multiselect({
//                     rebuild: 'rebuild',
                includeSelectAllOption: true,
                selectAllText: '全选',
                onChange: function (option, checked) {
                    var lists = getSelected();
                    $.each(lists, function (index, item) {
                        var temp = {
                            code: item
                        }
                        result.department.push(temp);
                    })
                }
            })
        },
        error: function (error) {
            // console.log("Error:");
            // console.log(error);
        }
    });
    //获取值
    function getSelected() {
        var selectValueStr = [];
        $(".multiselect option:selected").each(function () {
            selectValueStr.push($(this).val());
        });
        return selectValueStr;
    }

}


//获取预留字段的代码
function obligates() {
    $.ajax({
        type: "get",
        url: ApiRule.ruleColumn,
        // url: "../../../json/institution.json",
        success: function (data) {
            $('select.obligate').empty();
            $.each(eval(data), function (i, item) {
                // console.log(item);
                $(
                    "<option value='" + item.code + "'>" + item.name + "</option>"
                ).appendTo($(".obligate"));

            });
            $('.obligate').multiselect({
                placeholder: "请选择",
                onChange: function (option, checked) {
                    var lists = getSelecteds();
                    $.each(lists, function (index, item) {
                        var temp = {
                        	colValue: item
                        }
                        result.ruleInstanceExtcolumn.push(temp);
                    })
                }
            })

        },
        error: function () {
            layer.msg('获取预留字段接口有问题', function () {
                //关闭后的操作
            });
        }
    });

    var getSelecteds = function () {
        var selectValueStr = [];
        $(".obligate option:selected").each(function () {
            selectValueStr.push($(this).val());
        });
        return selectValueStr;
    }
}

//规则属性类型获取实现
function property() {
    $.ajax({
        url: ApiRule.ruleQuery,
        // url: '../../../json/rule-property.json',
        success: function (data) {
            $.each(eval(data), function (i, item) {
                $(
                    "<option value='" + item.modelPropertyCode + "'>" + item.name + "</option>"
                ).appendTo($(".select1"));
            });
        },
        error: function () {
            layer.msg('亲,规则属性类型接口有问题', function () {
                //关闭后的操作
            });
        }
    });
}
//获取详情接口
function ajax() {
    $.ajax({
        url: ApiRule.ruleDetail,
        //url: "../../../json/edit.json",
        data: {
            ruleCode: codes(),
        },
        dataType: "json",
        type: 'get',
        success: function (data) {
            console.log(data.conditions);
            datas(data);
            $.each(data.conditions, function (i, item) {
                var list = $("#list li").not(".template");
                $.each(list, function (index, obj) {
                    var $self = $(obj);
                    $self.find(".select1 option:selected").text(item.modelPropertyCodeName);
                    $self.find(".select2 option:selected").text(item.operatorCodeName);
                    $self.find(".type").val(item.propertyValueName);
                })
            });
            var $list=$('select.multiselect');
            $.each(data.department,function (i,item) {
//修改页面让boostrap-multiselect多选回显数据
                $("select.multiselect  option[value='" + item.code + "'] ").attr("selected", true);
                $list.multiselect('refresh');
            })
        },
        error: function () {
            console.log("出错了");
        }
    })

}

function datas(data) {
        result.name = data.name;
        result.code= codes();
        result.feeType=data.feeType;
      //自费还是免费
        if (data.feeTypeName == "免费") {
             $(".sle").find("option:first").text("免费");
         } else {
            $(".sle").find("option:last").text("自费");
        }
        //定向还是随机
        if(data.resultCode=="random"){
            $(".texts").text("随机");
        }else {
            $(".texts").text("定向");
        }

        result.resultCode=data.resultCode;
 }
function operator() {
    $.ajax({
        url: ApiRule.ruleoPerator,
        //url: '../../../json/fu.json',
        success: function (data) {
            // console.log(data);

            $.each(eval(data), function (i, item) {
                // console.log(item);
                $(
                    "<option value='" + item.operatorCode + "'>" + item.name + "</option>"
                ).appendTo($(".select2"));

            });
        },
        error: function () {
            layer.msg('亲,获取操作符接口有问题', function () {
                //关闭后的操作
            });
        }
    });
}

//点击增加模块按钮
function bindAdd() {
    var $template = $(".template");
    var $tbody = $("#list");
    $(document).on('click', '.add', function () {
        //clone(true)是深度克隆包括事件和所有的子元素
        // var templates = template();
        $template.clone().show().removeClass("template").appendTo($tbody);
    });
}

//点击删除模块
function bindDelete() {
    $(document).on('click', '.sub', function () {
        var length = $("#list").find("li").length;
        if (length == 2) {
            return;
        } else {
            $(this).parents("li").remove();
        }
    });
}

function submit() {
    $(document).on("click", '.submit', function () {
        console.log(111);
        // debugger;
        // if (result.department.length == 0) {
        //     layer.msg("请选择对象适用机构");
        //     return false;
        // }
        result.feeType = $(".sle").val();

        // result.resultCode = $(".change").val();
        // result.modelPropertyCode=$(".type").val();
        // if(result.ruleInstanceExtcolumn==0 ){
        //    layer.msg("请选择预留字段");
        //    return false;
        // }
        var sum = {
            propertyValue: $(".type").val(),
            operatorCode: $(".select6").val(),
            modelPropertyCode: $(".select8").val()
        }
        var list = $("#list li").not(".template");
        $.each(list, function (index, obj) {
            var temp = {};
            var $self = $(obj);
            temp.modelPropertyCode = $self.find(".select1").val();
            temp.operatorCode = $self.find(".select2").val();
            temp.propertyValue = $self.find(".type").val();
            result.conditions.push(temp);
        })
        result.conditions.unshift(sum);
        layer.open({
            skin: "tip",
            type: 0,
            title: "你确定要修改吗?",
            icon: 3,
            shade: .4,
            anim: 4,
            scrollbar: false,
            btn: ['确定', '取消'],
            yes: function (index) {
                $.ajax({
                    // url: 'http://10.50.111.9:8080/roadassistantclient/rulemanage/addRuleInstance',
                    /*****
                     * **********************************/
                    url: ApiRule.ruleoRevampAdd,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        ruleInstance: JSON.stringify(result)
                    },
                    success: function (data) {
                        console.log(data);
                        window.location.href = "ruleConfigPage.do";
                    },
                    error: function () {
                        layer.msg('亲,提交数据有接口有问题', function () {
                            //关闭后的操作
                        });
                    }

                })
                layer.close(index);
            }
        });

    })
}


// 工具函数
function getParame(paramName) {
    var url = decodeURI(location.href);
    var reg = new RegExp('(\\?|&)' + paramName + '=([^&?]*)', 'i');
    var arr = url.match(reg);
    arr = arr ? arr[2] : null;
    if (!arr) return arr;
    arr = decodeURIComponent(arr);
    arr = arr.replace(/[\<\>\"\']+/g, "");
    return arr;
}

详情页面的数据回写

var $form;
var form;
var $;
var layer;
var laytpl;
var element;
var laydate;
layui.use(['layer', 'element', 'layedit', 'jquery', 'form', 'laytpl', 'laydate'], function () {
    $ = layui.jquery;
    layer = layui.layer;
    form = layui.form();
    $form = $('form');
    laytpl = layui.laytpl;
    element = layui.element();
    laydate = layui.laydate;

    //详情页面的数据渲染
    render(codes());
    //返回一以上一个页面
    $("#section").on("click", ".back", function () {
        window.history.back();
    })
    $("#section").on("click",".priority-btn",function () {
        window.location.href="ruleConfigPage.do";
    })

});
//渲染接收code的参数
function codes() {
    //获取coder规则配置页的code并显示页面
    var code = getParame("code");
    return code;
}

//详情页面的渲染
function render(code) {
  // $.getJSON( "../../../json/edit.json",function (data) {
    $.getJSON(ApiRule.ruleDetail, {ruleCode: code}, function (data) {
        console.log(data);
        var $view = $(".view");
       //规则流名称
        $view.find(".code").text(data.name);
        //机构
      
       var count='';
        $.each(data.department, function (i, item) {
        	
            count+=item.name+',';
            
        })
      var text= $view.find(".code1").text(count);
    console.log(text);

        //费用类型
        $view.find(".code2").text(data.feeTypeName);
        //规则定向
        $view.find(".code3").text(data.resultCodeName);
        //预留字段
        var text='';
        $.each(data.ruleInstanceExtcolumn, function (i, item) {
            text+=item.colName+',';
        })
        $view.find(".code6").text(text);
        
        var $render = $(".render");
        $.each(data.conditions, function (i, item) {
                        var $show = $(
                            '<li class="hidden">' +
                            '<label class="layui-form-label w300">' + item.modelPropertyCodeName + ':</label>' +
                            '<div class="layui-input-inline area">' +
                            '<span class="text render1">' + item.propertyValueName + '</span>' +
                            '</div>' +
                            '<li/>'
                        )
                        $show.appendTo($render);
        })
    });

}

规则配置页面实现删除功能和查询功能

layui.use(['element', 'layer', 'form', 'layedit', 'laydate', 'laypage', 'laytpl'], function () {
    var $ = layui.jquery,
        layer = layui.layer,
        element = layui.element(),
        form = layui.form(),
        layedit = layui.layedit,
        laydate = layui.laydate,
        laytpl = layui.laytpl,
        laypage = layui.laypage;
    // 新增规则
    $('#add').on('click', function () {
        var href = 'addRulePage.do';
        // layer_show("新增规则配置", href, 'addRulePage', '1024', '640');
        window.location.href=href;
    });
    // 设置优先级
    $('#priority').on('click', function () {
        var href = 'priorityRule.do';
        window.location.href=href;
        //layer_show("设置优先级", href, 'priorityRule', '1024', '640');
    });
    //点击修改
    $("#tbody").on("click", "#edit", function () {
        var href = 'revampRule.do';
        layer_show("修改规则页", href, 'revampRule', '1024', '640');
    });



    //layui分页部分:1,表示当前页,查询获取数据的实现
    render(1);
    function render(curr) {
        // $.getJSON("../../../json/query.json", {departmentCode: code}, function (data) {

       $.getJSON(ApiRule.ruleList,{page:curr}, function (data) {
                console.log(data);
                var rows=10;
                loadPage();//要显示的html内容
                laypage({
                    cont: 'page',
                    skip: true,
                    pages: data.pageTotal,//总页数
                    groups: 3,//连续显示分页数
                    curr: data.page,//当前页数
                    jump: function (obj, first) {
                          if (!first) {
                              $("#tbody").empty();
                             render(obj.curr);
                          }
//                        $('#total').html('总记录数:' + obj.pages * rows+ ',目前正在第' + obj.curr + '页,一共有:' + obj.pages + '页');
                    }
                });
                
             
                function loadPage() {
                    var $tbody = $("#tbody");
                    $.each(data.data, function (i, item) {
                        var $rows = $(
                            '<tr>' +
                            '<td>' +
                            ' <a  href="ruleDetail.do?code=' + item.code + '"class="detail"  data-code="' + item.code + '">' + item.code + '</a>' +
                            '</td>' +
                            '<td class="queryname">' + item.name + '</td>' +
                            '<td class="feeType">' + item.feeTypeName + '</td>' +
                            '<td class="resultCode">' + item.resultCodeName + '</td>' +
                            ' <td>' +
                            ' <div class="layui-input-inline">' +
                            ' <a href="revampRule.do?code=' + item.code + '" id="edit" class="layui-btn layui-btn-small">' +
                            ' <i class="layui-icon">' +
                            '</i> 修改</a>' +
                            ' </div>' +
                            ' <div class="layui-input-inline">' +
                            ' <a href="javascript:;" id="dele" class="layui-btn layui-btn-danger layui-btn-small" data-code="'+item.code+'"><i' +
                            'class ="layui-icon"></i> 删除</a>' +
                            '</div>' +
                            '</td>' +
                            ' </tr>'
                        );
                         $rows.appendTo($tbody);
                    })
                }

            });

       
    }

    //点击删除
    $("#tbody").on("click", "#dele", function () {
        var $this = $(this);
        var code=$this.data('code');
        //弹出层
        layer.open({
            skin: "tip",
            type: 0,
            title: "你确定要删除吗?",
            icon: 0,
            shade: .4,
            anim: 3,
            area: ['350px', '150px'],
            scrollbar: false,
            btn: ['确定', '取消'],
            yes: function (index) {
           
                $.getJSON(ApiRule.ruleDele, {code: code}, function (data) {
                    if (data) {
                        $this.parents("tr").remove();
                        layer.msg('删除成功', function () {
                                //关闭后的操作
                            },
                            function () {
                                window.location.reload();
                            });
                        //由于删除后数据没有刷新,所有在重新渲染
                        form.render();
                    } else {
                        layer.msg('删除失败', function () {
                            //关闭后的操作
                        });
                    }
                })
                layer.close(index);
            }
        });

    });

//获取机构代码的数据展示
    institution();
    function institution() {
        $.ajax({
            url: ApiRule.ruleDepartment,
            success: function (data) {
                $.each(eval(data), function (i, item) {
                    // console.log(item);
                    $(
                        "<option  class='query' data-query='" + item.code + "' value='" + item.code + "'>" + item.name + "</option>"
                    ).appendTo($("#sel"));

                });
                form.render('select');//一定要加form.render();
            },
            error: function () {
                layer.msg('亲,报错了', function () {
                    //关闭后的操作
                });
            }
        });
    }
    //选择查询机构显示不同的机构代码:
    form.on('select(rule-institution)', function (data) {
        var datas = data.value;
        console.log(datas);

        if(datas==0){
            render(1);
        }
        $("#query").on("click", function () {
            // $.getJSON("../../../json/query.json", {departmentCode: code}, function (data) {
                $.getJSON(ApiRule.ruleSearch, {departmentCode: datas}, function (data) {
                console.log(data);
                  var $tbody = $("#tbody");
                  $tbody.empty();
                  $.each(data.data, function (i, item) {
                      var $rows = $(
                          '<tr>' +
                          '<td>' +
                          ' <a  href="ruleDetail.do?code=' + item.code + '"class="detail"  data-code="' + item.code + '">' + item.code + '</a>' +
                          '</td>' +
                          '<td class="queryname">' + item.name + '</td>' +
                          '<td class="feeType">' + item.feeTypeName + '</td>' +
                          '<td class="resultCode">' + item.resultCodeName + '</td>' +
                          ' <td>' +
                          ' <div class="layui-input-inline">' +
                          ' <a href="revampRule.dol?code=' + item.code + '" id="edit" class="layui-btn layui-btn-small">' +
                          ' <i class="layui-icon">' +
                          '</i> 修改</a>' +
                          ' </div>' +
                          ' <div class="layui-input-inline">' +
                          ' <a href="javascript:;" id="dele" class="layui-btn layui-btn-danger layui-btn-small" data-code="'+item.code+'"><i' +
                          ' class="layui-icon"></i> 删除</a>' +
                          '</div>' +
                          '</td>' +
                          ' </tr>'
                      );
                      $rows.appendTo($tbody);
                  })
                  form.render();
            })
        })
    });
//获取点击规则代码的code值
    $(document).on("click", ".detail", function () {})

});

优先级数据封装

var $form;
var form;
var $;
var layer;
var laytpl;
layui.use(['layer', 'jquery', 'form', 'laytpl'], function () {
    $ = layui.jquery;
    layer = layui.layer;
    form = layui.form();
    $form = $('form');
    laytpl = layui.laytpl,
        //先获取优先级页面
        render();
    //  查询优先级的设置
        priority();
        back();
});
//点击按钮返回上一个页面
function back() {
    $(document).on("click","#back",function () {
        window.history.back();
    })
}

//优先级页面的渲染
function render() {
    $.getJSON(ApiRule.rulePriority+"?", function (data) {
        var gettpl = $("#priority").html();
        if (gettpl) {
            laytpl(gettpl).render(data.data, function (html) {
                $("#tbody").html(html);

                    var $inputs=$(".inputs .next");
                    $.each($inputs,function (i,item) {
                        var $self=$(item);
                        if($self.find("input").val()=="undefined"){
                            $self.find("input").val("");
                        }

                    })
                //返回上一页面
                back();
            });
        } else {
            layer.msg('接口有问题', function () {
                //关闭后的操作
            })
        }

    });

}
//输入优先级点击确定实现优先级的设置
function priority() {
        $(document).on("click", ".priority-btn", function () {
            var saveDataAry=[];
            var list = $("tbody tr");
            $.each(list, function (index, obj) {
                var tds = $(obj).find('td');
                var result = {};
                $.each(tds, function (index, item) {
                    if (index == 0) {
                        result.code = $(item).text();
                    }
                    if (index == 3){
                        result.priority = $(item).find("input").val();
                    }
                })
                saveDataAry.push(result);
                result = {};
            } )
            $.ajax({
                    type:"POST",
                    url:ApiRule.ruleUpdate,
                    dataType:"json",
                    contentType:"application/json",
                    data:JSON.stringify(saveDataAry),
                    success:function(data){
                        if(data){
                            layer.msg('优先级修改成功', function () {
                                //关闭后的操作
                            });
                           setTimeout(function () {
                               window.location.href="ruleConfigPage.html";
                           },500)
                        }else {
                            layer.msg('优先级修改失败', function () {
                                //关闭后的操作
                            });
                        }
                    },
                    error:function () {
                        // layer.msg('优先级接口有问题', function () {
                        //     //关闭后的操作
                        // });
                    }
                });

        });

}
//判断优先级是否重复
function checkName(data){
    var values="";
    $(".priority").each(function(i,item){
        var value=$(this).val();
        values+=value; //获取所有的名称
    });
    var val=$(data).val(); //获得当前输入框的值
    var newValue=values.replace(val,""); //去除当前输入框的值
    if(newValue==""){
        return false;
    }else{
        if(newValue.indexOf(val)>-1){  //当前值和newValue作比较
        	layer.msg('名称已存在,请重新输入!', function () {
                //关闭后的操作
            });
            $(data).val("");
          
        }
    }
}


#datetable案例

/**
 *
 */
var $, layer, form;
var myTable;
// 全局监听状态
var ruleType = "assigned"; // assigned 定向 random 随机
var ruleNum = "R0000";
var orgNum = "200";
var orgName = "总部市场部";
layui.use(['layer', 'form', 'datatable'], function () {
  $ = layui.jquery;
  layer = layui.layer;
  form = layui.form();

  // 渲染表格数据
  myTable = $('#taskTable').DataTable({
    "processing": true,
    "language": lang, //提示信息
    "autoWidth": false, //自适应宽度,
    "lengthMenu": [10, 30, 50],
    "stripeClasses": ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合
    "searching": false, //是否允许Datatables开启本地搜索
    "paging": true, //是否开启本地分页
    "lengthChange": true, //是否允许产品改变表格每页显示的记录数
    "info": true, //控制是否显示表格左下角的信息
    //跟数组下标一样,第一列从0开始,这里表格初始化时,第四列默认降序
    "ordering": false,
    // "order": [1, 'desc'], //asc升序   desc降序
    "aoColumnDefs": [{
      "orderable": false,
      "aTargets": [0, 0, 0] // 指定列不参与排序
    }],
    "deferRender": true, //延迟渲染
    "ajax": {
      url: Api.tasks
    },  //数据的路径
    "columns": [{
      "data": "allotCode",
      "sTitle": "派工编号",
      "sDefaultContent": "",
      "className": 'task-id'
    }, {
      "data":"area",
      "sTitle": "地区",
      "sDefaultContent": "",
    }, {
      "data":"salvationTypeClassName",
      "sTitle": "项目",
      "sDefaultContent": "",
    }, {
      "data": function (obj) {
    	  var percents = obj.ruleAllotPersents;
    	  var text = "";
    	  $.each(percents, function (index, item) {
    		 text += (item.name); 
    	  });
    	  return text;
      },
      "sTitle": "派工比例",
      "sDefaultContent": "",
    }, {
      "data": "priority",
      "sTitle": "派工优先级",
      "sDefaultContent": "",
    }, {
      "data": function (obj) {
    	  var comHtml  = '';
    	  if(edit != '' && edit != null){
    		  comHtml+="<div class='layui-btn layui-btn-small task-edit' data-taskid='" + obj.allotCode + "'>" +
    	   		" <i class='layui-icon'>&#xe642;</i> 编辑" +
    	   		" </div>" ; 
    	  }
    	  if(del != '' && del != null){
    		  comHtml+="<div class='layui-btn layui-btn-danger layui-btn-small  task-delete' data-taskid='" + obj.allotCode + "'>" +
    		" <i class='layui-icon'>&#xe640;</i> 删除" +
    		" </div>" ;   
    	  }
    	  
        return  comHtml;
      },
      "sTitle": "规则操作",
      "sDefaultContent": "",
    }]
  });

//  myTable.on('draw.dt', function () {
//    layerMsg('查询成功', 1);
//  });
  renderRuleList();
  renderOrgList();
  bindQuerySelect();
  // 编辑或者删除派工规则
  bindOperator();
  // 查看派工详情
  bindViewDetail();
  // 查询或增加派工规则
  bindBtnsRule();
});
// 页面上按钮事件监听 查询 重置 新增
function bindBtnsRule () {
  // 新增派工
  $('#btn-add').on('click', function () {
    if (ruleType == "assigned") {
      var params = "?ruleType=" + ruleType + "&ruleNum=" + ruleNum;
    } else {
      var params = "?ruleType=" + ruleType + "&orgNum=" + orgNum + "&orgName=" + orgName;
    }
    var href = 'addTask.do' + params;
    
    var index = layer.open({
		type : 2,
		area : [ '1024px', '640px' ],
		id: 'addTask',
		fix : true,
		maxmin : false,
		shade : false,
		title : '新增派工规则',
		content : href
	});
	console.log("index="+index);
	layer.full(index)
  });
  // 查询派工列表
  $('#btn-search').on('click', function () {
    if (ruleType == "assigned") {
      var params = "?ruleType=" + ruleType + "&param=" + ruleNum;
    } else {
      var params = "?ruleType=" + ruleType + "&param=" + orgNum;
    }
    myTable.ajax.url(Api.tasks + params).load(null, true);
  });
  // 重置按钮
  $("#btn-reset").on('click', function () {
    location.reload();
  });
}
// 绑定查询条件
function bindQuerySelect () {
  // 监听规则属性
  form.on('select(rule-property)', function(data){
    ruleType = data.value;
    if (ruleType == "assigned") {
      $('.rule-reflect-0').show();
      $('.rule-reflect-1').hide();
    } else {
      $('.rule-reflect-0').hide();
      $('.rule-reflect-1').show();
    }
  });
  // 监听规则流编号
  form.on('select(rule-num)', function(data){
    ruleNum = data.value;
  });
}
// 绑定操作
function bindOperator () {
  // 修改派工规则
  $(document).on('click', '.task-edit', function () {
    var taskId = this.dataset.taskid;
    var params = "?taskid=" + taskId;
    var href = "modifyTask.do" + params;
    var index = layer.open({
		type : 2,
		area : [ '1024px', '640px' ],
		id: 'modifyTask',
		fix : true,
		maxmin : false,
		shade : false,
		title : '修改派工规则',
		content : href
	});
	console.log("index="+index);
	layer.full(index)
  });
  // 删除派工规则
  $(document).on('click', '.task-delete', function () {
    var $self = $(this);
    var taskId = this.dataset.taskid;
    layer.confirm('确认要删除吗?', {
      icon: 0,
      title: '警告',
      shade: false
    }, function() {
      deleteTask(taskId, $self);
    });
  });
}
function deleteTask (taskId, $self) {
  $.ajax({
    url: Api.del,
    data: {
    	code: taskId,
    	resultCode:ruleType
    },
    type: isDev ? 'GET' : 'POST',
    timeout: 10000,
    dataType: 'json',
    success: function (result) {
      if (result.success) {
        $self.parent().parent().remove();
        layerMsg('删除成功', 1);
      } else {
        layerMsg('数据有误,请稍后再试');
      }
    },
    error: function () {
      layerMsg();
    }
  });
}
function bindViewDetail () {
  $(document).on('click', '#taskTable tbody .task-id', function(obj) {
    var taskId = this.textContent;
    var href = "detailTask.do?taskid=" +  taskId;
    var index = layer.open({
		type : 2,
		area : [ '1024px', '640px' ],
		id: 'detailTask',
		fix : true,
		maxmin : false,
		shade : false,
		title : '派工详情',
		content : href
	});
	console.log("index="+index);
	layer.full(index)
  });
}
function bindOrgSelect () {
  // 监听机构编号
  form.on('select(org-num)', function(data){
	var splits = data.value.split("-");
    orgNum = splits[0];
    orgName = splits[1];
  });
}
function renderOrgList () {
  $.ajax({
    url: Api.orgs,
    timeout: 10000,
    dataType: 'json',
    success: function (result) {
      if (result.success) {
        var orgHtml = '';
        var orgList = result.data;
        $.each(orgList, function (index, obj) {
          (index == 0) && (orgNum = obj.code);
          orgHtml += '<option value="' + obj.code + "-" +  obj.name + '">' + obj.code +  "-" + obj.name + '</option>';
        })
        $(".org-num").html(orgHtml);
        form.render();
        bindOrgSelect();
      } else {
        layer.msg('网络错误,请稍后再试!', {
          icon: 5,
          time: 1500
        });
      }
    },
    error: function () {
      layer.msg('网络错误,请稍后再试!', {
        icon: 5,
        time: 1500
      });
    }
  });
}
function bindRuleSelect () {
  // 监听机构编号
  form.on('select(rule-num)', function(data){
    ruleNum = data.value;
  });
}
function renderRuleList () {
  $.ajax({
    url: Api.rules,
    timeout: 10000,
    dataType: 'json',
    success: function (result) {
      if (result.success) {
        var ruleHtml = '<option value="' + 'R0000' + '">' +'R0000' + '</option>';
        var ruleList = result.data;
        $.each(ruleList, function (index, obj) {
          // (index == 0) && (ruleNum = obj.code);
          ruleHtml += '<option value="' + obj.code + '">' + obj.code + '</option>';
        })
        $(".rule-num").html(ruleHtml);
        form.render();
        bindRuleSelect();
      } else {
        layerMsg();
      }
    },
    error: function () {
      layerMsg();
    }
  });
}

转载于:https://my.oschina.net/yongxinke/blog/831453

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值