发表更新 fenghai.sheheng.wang Web14 分钟读完 (大约2056个字)

CommonJS

leo 为框架包 leobase.js 方法

  1. chosen

1
2
$("#td_YX").trigger("chosen:updated");//设置选中
$(".modal-body select").prop("disabled", true); //设置只读

  1. 查询条件重置

1
2
3
4
5
6
7
$("#idxSearchForm").find("select").each(function(i){
    if($(this).attr("name")!=""){
        $(this).val('');
        $(this).chosen('destroy');
    }
});
leo.createChosenSelect();

  1. 弹出确认框

1
2
3
4
 leo.confirm('导出','确定要导出信息么',function(btn){
if('yes'==btn){
}
})

  1. Form 使用 spring:xxx.xx 提交

1
2
3
4
5
6
7
8
9
10
11
leo.formSubmit('modalForm', {
      success : function(request, status){
          $("#myModal").modal('hide');
          leo.alert(leo.INFO, request.msg, function(){
              idxQuery();
          });
      },
      error : function(request, status){
          leo.alert(leo.WARN, '提交失败，请重试！');
      }
  }, true);

  1. 填充下拉

1
2
leo.getSelectOptionFromJson('XB',co.user_sex, true);//下拉
leo.createChosenSelect({});

6. 页面按 name 属性赋值

1
leo.initFormData(data, 'modalForm');

  1. 从文件服务器下载模板

1
2
var url = leo.getDownloadUrl('yjsjxj_template/zjwtbjxj_cgjdb.docx', '成果鉴定模板');
window.open(url);

  1. 返回保留所选下拉选

1
2
3
4
5
6
7
8
9
10
11
12
13
var goBack = function(){
	//leo.goPrePage();
    leo.base.goBackPageData = leo.base.prePages.pop();
    leo.redirectPage(leo.base.goBackPageData.url, leo.base.goBackPageData.data, function () {
        $("#idxSearchForm").find("select").each(function(i){
            if($(this).attr("name")!=""){
                $(this).chosen('destroy');
            }
        });
        leo.createChosenSelect({});
    }, true);
};

  1. 当前页面跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 leo.redirectPage("spring:wjsb.toGzdxdaView", {
 	op : op,
 	data : $.toJSON(data),
 	co : $.toJSON(co) ,
 	taskKey : taskKey
});
var rowsDatas = leo.getSelectedJqgridRowData('idxList', 'action');
	var ids = [];
	if(!rowsDatas || rowsDatas.length == 0){
		leo.alert(leo.INFO, '请选择至少一条数据');
		return;
	}
	for(var i = 0; i < rowsDatas.length; i++){
		ids.push(rowsDatas[i].ID);
	}
	return ids;

  1. ajax

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
    url: path + '',
    type: "POST",
    data: {},
    async: false,
    success: function (request) {

    },
    error: function () {
        leo.alert(leo.WARN, "网络异常");
    }
});

  1. 查看详情

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var viewDetails = function (ID) {
    document.getElementById('top').style.display = "";
    document.getElementById('secondTitle').style.display = "";
    document.getElementById('goback').style.display = "";
    leo.jqAjax({
        url: "spring:getDetails",
        type: 'POST',
        dataType: 'json',
        data: {Id: ID},
        success: function (request, status) {
            document.getElementById('noticelist').innerHTML='<div id="content" style="padding-left: 					   			                                                  45px; padding-right: 30px;">'+request.nr+'</div>';
            document.getElementById('top').innerHTML='<div class="top" id ="title">'+request.bt+'</div>';
            document.getElementById('secondTitle').innerHTML='<div class="time" id ="time" style="border-bottom:1px dashed #F00 ; margin-bottom: 10px; padding-bottom: 10px;">'+request.sj+'</div>';
            document.getElementById('navigation').remove();
        }
    });
};

JqGrid 部分

  1. jqgrid 条件查询

1
2
3
4
5
6
7
8
9
var idxQuery = function(){
    var params = {};
    $("#idxSearchForm").find("input,select").each(function(i){
        if($(this).attr("name")!=""){
            params[$(this).attr("name")]=$(this).val();
        }
    });
    $("#idxList").jqGrid('setGridParam', { postData: params }).jqGrid('setGridParam', { 'page': 1 }).trigger("reloadGrid");
};

  1. 页面表单控件获取数据

1
2
3
4
5
6
var params = {};
     $("#idxSearchForm").find("input,select").each(function(i){
         if($(this).attr("name")!=""){
             params[$(this).attr("name")]=$(this).val();
         }
     });

  1. 页面验证,页面加载时调用

1
2
3
4
5
6
7
8
9
10
11
12
13
  var valid=function(){
    validFrom = $("#modalForm").Validform({
        ignoreHidden:true,
        tiptype:function(msg,o,cssctl){
            if(!o.obj.is("form")){
                var objtip=o.obj.siblings(".Validform_checktip");
                cssctl(objtip,o.type);
                objtip.text(msg);
                objtip.css('color', 'red');
            }
        }
    });
};

  1. jqgrid 刷新当前页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var grid = $("#idxList");
var page = grid.getGridParam('page'); // current page
var rows = grid.getGridParam('rows'); // rows
var sidx = grid.getGridParam('sidx'); // sidx
var sord = grid.getGridParam('sord'); // sord
var json = {};
$("#idxSearchForm").find("input,select").each(function (i) {

    if ($(this).attr("name") != "") {
        json[$(this).attr("name")] = $(this).val();
    }
    json['taskKey'] = taskKey;
});
grid.jqGrid('setGridParam', {postData: json,page:page, rows:rows, sidx:sidx, sord:sord}).trigger("reloadGrid");

普通 js 部分

  1. 页面加载

1
window.onload = function (event) {};

  1. 返回主页面

1
2
3
4
5
6
var gainAll = function () {
    document.getElementById('goback').style.display = "none";
    document.getElementById('top').style.display = "none";
    document.getElementById('secondTitle').style.display = "none";
    location.reload();
};

  1. 日期

1
2
3
4
5
6
7
8
9
10
11
var initDatetimepicker= function (id) {
    $('#' + id).datetimepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        language: 'zh-CN',
        todayHighlight: true,
        startView: 2,
        minView: 2,
        maxView: 4
    })
};

  1. 在页面加载时初始化所有的日期控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* Function 传入需要初始化的组件ID,初始化所有日期控件
* Description 在页面加载时初始化所有的日期控件
* Author heng.wang
* Date 2018/8/15 16:45
*/
var initDatetimepicker = function () {
    for (var i = 0; i < arguments.length; i++) {
        $("#" + arguments[i]).datetimepicker({
            format: 'yyyy-mm-dd',
            autoClose: true,
            language: 'zh-CN',
            todayHighlight: true,
            startView: 2,
            minView: 2,//若需要选择到分钟则改为0，并且将format改为yyyy-mm-dd HH:ii
            maxView: 4
        });
    }
};

  1. 在设置为只读属性时背景为灰色

1
2
3
4
5
6
7
8
9
10
11
12

/**
 * Function 传入需要初始化的组件ID,更改背景色为白色
 * Description 在设置为只读属性时背景为灰色
 * Author heng.wang
 * Date: 2018/8/27 14:49
 */
function changeBackgroundColor() {
    for (var i = 0; i < arguments.length; i++) {
        $("#" + arguments[i]).css({"background-color": "#FFFFFF"});
    }

  1. 设置页面组件不可写属性

1
2
3
4
5
6
7
8
9
10
11
/**
 * Function 传入需要初始化的组件ID,设置只读属性
 * Description 设置页面组件不可写属性
 * Author heng.wang
 * Date: 2018/8/27 15:03
 */
function setReadOnly() {
    for (var i = 0; i < arguments.length; i++) {
        $("#" + arguments[i]).attr("readOnly", "true");
    }
}

  1. 自动判断日期有效性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
 * Function 时间段验证,开始时间不能大于结束时间
 * Description 按顺序传入需要初始化的日期组件ID,
 *             开始-结束,验证日期有效性
 * Author heng.wang
 * Date: 2018/8/28 11:46\
 * //TODO 需改进为无序,只传入ID 自动判断日期有效性
 */
var timeVerify = function (start, end) {
    start = $("#" + start);
    end = $("#" + end);
    start.on('changeDate', function (e) {
        if (end.val() != null && end.val() !== "" && start.val() > end.val()) {
            pfs.comm.showDialog("开始时间必须小于结束时间");
            start.val("");
        }
    });
    end.on('changeDate', function (e) {
        if (start.val() != null && start.val() !== "" && end.val() < start.val()) {
            pfs.comm.showDialog("结束时间必须大于开始时间");
            end.val("");
        }
    });
};

  1. 查询字典表为下拉选赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
 * Function 查询字典表为下拉选赋值
 * Description 传入组件ID数组与 字典类型数组  两个数组长度需一致,每种类型对应一个组件
 *            例如:
 *            类型数组typeArr['a1','a2']
 *            ID数组elArr['el1',el2]
 *            代表查询 a1,a2两种类型的所有字典值,并将这两组值赋给el1,el2 两个下拉选
 * Author heng.wang
 * Date: 2018/8/28 15:00
 */
var getSelectOption = function (typeArr, elArr) {
    debugger;
    constStr = '';
    for (var i = 0, constStr; i < typeArr.length; i++) {
        constStr += typeArr[i];
        constStr += ',';
    }
    $.ajax({
        url: "/commonController/getSysConst?random=" + Math.random(),
        type: "GET",
        dataType: "json",
        data: {
            const: constStr
        },
        success: function (req) {
            for (var i = 0; i < elArr.length; i++) {                pfs.comm.getSelectOptionFromJson(elArr[i], req[typeArr[i]], true);
            }
        }
    });
};

目标管理系统部分函数记录

  1. 目标部分全局变量

1
2
3
4
5
6
7
8
9
10
11
12
/************定义需要用到的全局变量***********/
//条件查询用户参数
var candidateGroups = '';
var candidateOrgs = '';
var candidateUsers = '';
//当前流程实例ID
var procId = pfs.comm.getUrlArgObject().PROC_INST_ID_;
// 存储所有已填写的指标
var tar_arr = [];
//选择人员类型
var selectUser = '';
var page = formPage.split("_")[1];

目标部分 js 函数抽出

  1. 初始化用户列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var initUserGrid = function () {
    var userDiv = $("#userDiv");
    $("#userModal").modal('show');
    userDiv.width(800);
    var colNames = ['value', '姓名', '工号', '所属部门'];
    var colModel = [
        {"index": "value", "name": "value", "editable": false, hidden: true},
        {"index": "name", "name": "name", "editable": false, width: '30%'},
        {"index": "code", "name": "code", "editable": false, width: '30%'},
        {"index": "orgname", "name": "orgname", "editable": false, width: '30%'}
    ];
    userDiv.wdgJQGrid("userList", "userDiv", {
        url: pfs.comm.basePath + 'wf/user',
        datatype: 'json',
        mtype: "GET",
        postData: {
            userId: candidateUsers,
            orgIds: candidateOrgs,
            groupIds: candidateGroups
        },
        colNames: colNames,
        colModel: colModel,
        height: 'auto',
        viewrecords: true,
        multiselect: false,
        rownumbers: true,
        rownumWidth: 30,
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#userPager",
        gridComplete: function () {
            setPagerStyle();
        }
    });
};

  1. 设置分页格式

1
2
3
4
5
6
7
8
9
10
11
var setPagerStyle = function () {
    var next_pager = '<span title="下一页" class="glyphicon glyphicon-chevron-right">下一页</span>';
    var last_pager = '<span title="末页" class="glyphicon glyphicon-forward">末页</span>';
    var prev_pager = '<span title="上一页" class="glyphicon glyphicon-chevron-left">上一页</span>';
    var first_pager = '<span title="首页" class="glyphicon glyphicon-backward">首页</span>';
    $('#next_pager').empty().append(next_pager);
    $('#last_pager').empty().append(last_pager);
    $('#prev_pager').empty().append(prev_pager);
    $('#first_pager').empty().append(first_pager);
    $('#pager_center').css("width", "800px");  //设置分页条宽度
};

  1. 参与者查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var cyzQuery = function () {
    var params = {};
    $("#searchForm").find("input,select").each(function () {
        if ($(this).attr("name") !== "") {
            params[$(this).attr("name")] = $(this).val();
        }
    });
    $("#userList").jqGrid('setGridParam', {postData: params}).jqGrid('setGridParam', {'page': 1}).trigger("reloadGrid");
};
//添加option
var dropdown = function (data, element) {
    if (data) {
        element.append('<option value="' + data + '">' + data + '</option>');
    }
};

  1. 查询当前目标所有自定义考核指标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var queryAllTar = function () {
    $("form.form-inline.tar_body").empty();
    url = basePath + "/commonController/queryAllTar";
    $.ajax({
        url: url,
        type: "POST",
        async: false,
        data: {
            procId: procId
        },
        success: function (req) {
            console.log(req.data);
            var ids = req.data.length;
            for (var i = 0; i < ids; i++) {
                var x = i + 1;
                getHTML(x);
                var NAME = req.data[i].NAME;
                var VALUE = req.data[i].VALUE;
                $("#" + 'tar_name_' + x).val(NAME);
                $("#" + 'tar_value_' + x).val(VALUE);
            }
        }
    });
};

  1. 删除当前按钮所在行自定义目标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var delTar = function (e) {
    // 删除当前行HTML
    $(e.target).parent().parent().remove();
    var ids = tarArray();
    var x = 0;
    //重置每个指标文本
    //TODO 可以更改为只修改当前删除行后面的文本,
    for (var i = 0; ids.length > i; i++) {
        var eachTar = $(ids[i][0]);
        eachTar.text("");
        x++;
        eachTar.text('指标' + x + '名称: ');
    }

};

  1. 提交定义考核指标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var submitTar = function () {
    // debugger;
    // 获取已添加的指标数组
    var tarIds = tarArray();
    // 填写数据个数
    // tar_json.tar_num = tarIds.length;
    tar_arr = [];
    //循环取KV数据
    for (var i = 0; i < tarIds.length; i++) {
        //定义单独json 放每个指标的键值对
        var each_json = {};
        // key
        var tar_key = $(tarIds[i][1]).val();
        //value
        var tar_value = $(tarIds[i][3]).val();
        //去除无效数据
        if ("" === tar_key) {
            continue
        }
        //不为空存入子json
        each_json.NAME = tar_key;
        each_json.VALUE = tar_value;
        //放入数组
        // tar_json[i] = each_json;
        tar_arr.push(each_json);
    }
    console.log(tar_arr);
    //返回数据
    $('#addTarModal').modal('hide');
};

  1. 查找有多少个新增的自定义指标并放入数组返回

1
2
3
4
5
6
7
8
var tarArray = function () {
    var ids = [];
    //查找元素
    $("form.form-inline.tar_body").find($(".tar_sub")).each(function () {
        ids.push($(this).children().children());
    });
    return ids;
};

  1. 追加 自定义指标 HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var getHTML = function (i) {
    var tarHTML = '<div class=" tar_sub tar_sub_' + i + ' " style="margin-bottom: 20px">\n' +
        '                        <div class="form-group mx-md-3 mb-2   tar_name" style="width: 40%;">\n' +
        '                             <span style="text-align: center">指标' + i + '名称: </span>\n' +
        '                            <input type="text" class="form-control" id="tar_name_' + i + '" placeholder=""\n' +
        '                                   style="width: 70%">\n' +
        '                        </div>\n' +
        '                        <div class="form-group mx-md-3 mb-2 tar_value" style="width: 40%">\n' +
        '                           <span style="text-align:center;">指标值: </span>\n' +
        '                            <input type="text" class="form-control" id="tar_value_' + i + '" placeholder=""\n' +
        '                                   style="width: 70%">\n' +
        '                        </div>\n' +
        '                        <div class="form-group mx-md-3 mb-2 tar_del" style="width: 10%">\n' +
        '                            <button type="button" class="btn btn btn-light" id="del" onclick="delTar(event)" style="width: 100%">\n' +
        '                                删除\n' +
        '                            </button>\n' +
        '                        </div>\n' +
        '                    </div>';
    $("form.form-inline.tar_body").append(tarHTML);
};

  1. 重写页面的保存提交方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var saveTarAndSubmit = function () {
    // debugger;
    var url = basePath + "/commonController/saveTarAndSubmit";
    // if (0 == tar_arr.length) {
    //     pfs.comm.msg("请补充考核指标!", function () {
    //     });
    // } else {
    //     var data = {
    //         procId: procId,
    //         tarData: JSON.stringify(tar_arr)
    //     };
    //     pfs.comm.saveAndSubmit(url, data);
    // }
    if (0 == tar_arr.length) {
        //防止查看考核指标后直接点关闭导致没有指标值
        submitTar();
    }
    var data = {
        procId: procId,
        tarData: JSON.stringify(tar_arr)
    };
    pfs.comm.saveAndSubmit(url, data);
};

  1. 填充下拉选<请选择>

1
2
3
4
5
6
7
8
leo.getSelectOptionStr = function (jsonObj) {
    var optionstring = "";
    for (var item in jsonObj) {
        var newKey = item.replace(",");
        optionstring += "<option value=\"" + newKey + "\" >" + jsonObj[item] + "</option>";
    }
    return optionstring;
};

  1. 获取课程下拉列表

1
2
3
4
5
6
7
8
9
10
11
12
13
var getMajorSelectOption = function () {
    $.ajax({
        url: "/commonController/getSysConst?random=" + Math.random(),
        type: "GET",
        dataType: "json",
        data: {
            const: 'course_type'
        },
        success: function (req) {
            pfs.comm.getSelectOptionFromJson("major", req.course_type, true);
        }
    });
};

CommonJS

https://blog.luckyh.cn/2018/11/22/common-1.0/

作者

fenghai.sheheng.wang

发布于

2018-11-22

更新于

2023-09-20

许可协议

CC BY-NC-SA 4.0

#

分类

标签

Activiti2
Atom1
CentOS72
Docker4
GitLab1
Hexo1
IDEA2
Maven1
MySQL1
OpenCart1
SpringBoot1
Tomcat1
Ubuntu1
Wisdragon1
Xshell1
docker1
java3
js2
netty1
nio1
oralce1
redis1
shell1
springboot1
中间件1
框架1
缓存1
面试1

最新文章

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×

×