Java 前端简易页面总结

1. 初始化获取数据 js代码

$(function () {
  $("#jqGrid").jqGrid({
    url: baseURL + system/artificer/list,
    datatype: "json",
    colModel: [
      {label: seq, name: seq, hidden: true, hidedlg: true, key: true},
      {label: 姓名, name: name, width: 100, align: "center"},
      {
          label: 头像, name: img, width: 150, formatter: function (cellvalue) {
            var detail = <image src=" + cellvalue + " style="width: 200px;height: 70px;"/>;
            return detail;
          }
       },
      {label: 职位, name: post, width: 100, align: "center"},
        {
      	  label: 受欢迎度, name: isHot, width: 150, formatter: function (cellvalue) {
              if (cellvalue == 0) {
                return "正常";
              } else if (cellvalue == 1) {
                return "热门";
              } else {
                return "-";
              }
            }
          },
      {label: 电话, name: telphone, width: 100, align: "center"},
      {label: 建立时间, name: inputTime, width: 150, align: "center"}],
    height: auto,
    rowNum: 10,
    rowList: [10, 30, 50],
    rownumbers: true,
    rownumWidth: 25,
    autowidth: true,
    multiselect: false,
    pager: "#jqGridPager",
    jsonReader: {
      root: "page.list",
      page: "page.currPage",
      total: "page.totalPage",
      records: "page.totalCount"
    },
    prmNames: {
      page: "page",
      rows: "limit",
      order: "order"
    },
    gridComplete: function () {
      // 隐藏grid底部滚动条
      $("#jqGrid").closest(".ui-jqgrid-bdiv").css({
        "overflow-x": "hidden"
      });
    }
  });
});

页面代码

<table id="jqGrid"></table>
<div id="jqGridPager"></div>

<!-- 实例化编辑器 -->
var ue = UE.getEditor(container, {
  enterTag: ,
  allowDivTransToP: false
});

/*清空内编辑器内容*/
function clearContent() {
  ue.setContent("");
}

页面

<div class="form-group">
	    <div class="col-sm-2 control-label">详细内容</div>
		<div id="ueditor" class="col-xs-9">
			<div class="container">
			    <!-- 加载编辑器的容器 -->
				<script id="container" name="htmlContent" type="text/plain"></script>
			</div>
		</div>
	  </div>

<script src="../../../plugins/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script src="../../../plugins/ueditor/ueditor.all.js"></script>
<script src="../../../plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
<!-- 实例化编辑器 -->
<script src="../../../js/modules/system/home_page_management/ols.js"></script>