前端

前端框架之easyUI

略

项目中用到的,写的不多.

1
2
3
4
5
6
7
8
9
10
11
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css"/>
<link rel="stylesheet" type="text/css" href="../../css/default.css"/>
<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"  src="../../js/easyui/ext/jquery.cookie.js"></script>
<script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

表格

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
$(function(){
  // 页面加载后，对datagrid 进行设置
  $("#grid").datagrid({
    // 设置表格一些属性 
    columns : [[ // 二维数组 支持 多级表头， 每一个数组 就是表头一行
      {
        field: "id", // 用于和服务器返回json中字段对应 
        title: "编号", // 列标题显示内容， <th> 
        width: 100
      },
      {
        field: "name", // 用于和服务器返回json中字段对应 
        title: "商品名称", // 列标题显示内容， <th> 
        width: 100
      },
      {
        field: "price", // 用于和服务器返回json中字段对应 
        title: "价格", // 列标题显示内容， <th> 
        width: 100,
        formatter: function (value,row,index) {
             return value.replace("T"," ");//如果price为时间类型,可以这样解析时间
        }
      },
      {
        field: 'standard.name',//字段
        title: '取派标准',//文字
        width: 120,//宽度
        align: 'center',//布局
        formatter: function (value, rowData, rowIndex) { //解析显示数据的内容
          // value 当前属性对应json数据中值
          // rowData 当前行数据
          // rowIndex 第几行
          if (rowData.standard != null) {
            return rowData.standard.name;
          }
          return "";
        }
      }
    ]],
    iconCls: 'icon-forward',
    fit: true,//占满父容器
    border: false,//边框
    rownumbers: true,//行号
    striped: true,
    pageList: [10,30, 50, 100],//用于分页
    idField: 'id', //行数据的id用什么
    onDblClickRow: doDblClickRow //双击事件,需要自定义方法
    url : "product.json" , // 加载json数据，显示表格数据,(还可以是一个请求)
    pagination : true , // 分页工具条
    toolbar : [  // 一维数组，定义按钮 
      {
        id : "saveBtn",//id
        text : "保存",//文字
        iconCls : "icon-save",//图标
        handler : function(){//点击事件
          alert("保存...");
        }
      },
      {
        id: 'button-search',
        text: '查询',
        iconCls: 'icon-search',
        handler: function () {
          $("#searchWindow").window('open');
        }
      },
    ]
  });
});

动态下拉框

1
2
3
4
5
6
7
<input type="text" name="standard.id"
       class="easyui-combobox"
       data-options="equired:true,
                     valueField:'id',
                     textField:'name',
                     url:'../../standard_findAll.action'"/>
<!--valueField(值),textField(显示的文字),url(从哪得到的数据)-->

自动导出form表单的数据为JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.fn.serializeJson = function () {
  var serializeObj = {};
  var array = this.serializeArray();
  var str = this.serialize();
  $(array).each(function () {
    if (serializeObj[this.name]) {
      if ($.isArray(serializeObj[this.name])) {
        serializeObj[this.name].push(this.value);
      } else {
        serializeObj[this.name] = [serializeObj[this.name], this.value];
      }
    } else {
      serializeObj[this.name] = this.value;
    }
  });
  return serializeObj;
};

//使用
var params = $("#searchForm").serializeJson();//即可得到searchForm内的Json格式数据

一键上传

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
/*
<!-- 导入ocupload -->
<script type="text/javascript"
src="../../js/ocupload/jquery.ocupload-1.1.2.js"></script>
*/
// 为导入按钮，添加一键上传效果
$("#button-import").upload({
  // 默认name为file
  action: '../../area_batchImport.action',
  onSelect: function () {
    // 选中文件后，关闭自动提交
    this.autoSubmit = false;
    // 判定文件格式 ，以.xls 或者 .xlsx 结尾
    var filename = this.filename();
    var regex = /^.*\.(xls|xlsx)$/;
    if (regex.test(filename)) {
      // 满足
      this.submit();
    } else {
      $.messager.alert("警告", "只能上传.xls或.xlsx结尾的文件！", "warning");
    }
  },
  onComplete: function (response) {
    alert("文件上传成功！");
    window.location.reload(true);
  }
});

未完待续…