记录一下完成的首页模版

   
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
   
   
   
  <script type="text/javascript" src="/default/common/nui/nui.js"></script>
  <script>
  $(function(){
  nui.context='/default'
  })
  </script>
   
   
   
   
   
  <head>
  <title>图书信息</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link href="../demo.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <h1>图书信息</h1>
   
  <div style="width:800px;">
  <div class="nui-toolbar" style="border-bottom:0;padding:0px; width:1200px;">
  <table style="width:100%;">
  <tr>
  <td style="width:100%;">
  <a class="nui-button" iconCls="icon-add" onclick="add()">增加</a>
  <a class="nui-button" iconCls="icon-edit" onclick="edit()">编辑</a>
  <a class="nui-button" iconCls="icon-remove" onclick="remove()">删除</a>
  <a class="nui-button" iconCls="icon-save" onclick="saveData()" plain="true">保存</a>
  </td>
  <td style="white-space:nowrap;">
  <input id="key" class="nui-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>
  <a class="nui-button" onclick="search()">查询</a>
  </td>
  <td style="white-space:nowrap;">
  <input id="xin" class="nui-textbox" emptyText="请输入数值" style="width:150px;" onenter="onKeyEnter" />
  <a class="nui-button" onclick="tiaoxin()">调薪</a>
  <input type="button" value="导出Excel" onclick="ExportExcel()" style="margin-left:50px;"/>
  </td>
  </tr>
  </table>
  </div>
  </div>
  <div id="datagrid1" class="nui-datagrid" style="width:1202px;height:500px;" allowResize="true"
  url="com.primeton.zk.caozengling.queryEntities.queryEntities.biz.ext" pageSize="20" idField="id" multiSelect="true" dataField="data" allowCellEdit="true" allowCellSelect="true" multiSelect="true" editNextOnEnterKey="true" >
  <div property="columns">
   
  <div type="checkcolumn" ></div>
  <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
  <input property="editor" class="nui-textbox" style="width:100%;" />
  </div>
  <div field="name" width="120" headerAlign="center" allowSort="true">姓名
  <input property="editor" class="nui-textbox" style="width:100%;" />
  </div>
  <div header="工作信息">
  <div property="columns">
  <div field="tDepartment.name" width="120">所属部门</div>
  <div field="tPosition.name" width="100">职位</div>
  <div field="salary" dataType="currency" currencyUnit="￥" align="right" width="100" allowSort="true">薪资</div>
  </div>
  </div>
  <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
  <div header="基本信息">
  <div property="columns">
  <div field="gender" width="100" renderer="onGenderRenderer">性别<input property="editor" class="nui-combobox" style="width:100%;" data="Genders" /> </div>
  <div field="age" width="100" allowSort="true" >年龄</div>
  <div field="birthday" width="100" renderer="onBirthdayRendere r">出生日期<input property="editor" class="nui-datepicker" style="width:100%;"/></div>
  <div field="married" width="100" align="center" renderer="onMarriedRenderer">婚否</div>
  <div field="email" width="100">邮箱</div>
  </div>
  </div>
  <div header="学历信息">
  <div property="columns">
  <div field="tEducational.name" width="100">学历</div>
  <div field="school" width="120">毕业院校</div>
  </div>
  </div>
  </div><input type="hidden" filter="false">
   
  </div>
   
   
  <script type="text/javascript">
  nui.parse();
  var grid = nui.get("datagrid1");
  grid.load();
  grid.sortBy("createtime", "desc");
  //增加
  function add() {
  nui.open({
  url: "/default/caozengling/addBooks.jsp",
  title: "新增员工", width: 600, height: 360,
  onload: function () {
  var iframe = this.getIFrameEl();
  var data = { action: "new"};
  iframe.contentWindow.SetData(data);
  },
  ondestroy: function (action) {
  grid.reload();
  }
  });
  }
  //编辑
  function edit() {
   
  var row = grid.getSelected();
  if (row) {
  nui.open({
  url: "/default/caozengling/queryBooks.jsp",
  title: "编辑员工", width: 600, height: 360,
  onload: function () {
  var iframe = this.getIFrameEl();
  var data = { action: "edit", id: row.id };
  iframe.contentWindow.SetData(data);
  },
  ondestroy: function (action) {
  grid.reload();
  }
  });
   
  } else {
  alert("请选中一条记录");
  }
   
  }
  //删除
  function remove() {
   
  var rows = grid.getSelecteds();
  var data = {employee:rows};
  var json = nui.encode(data);
  if (rows.length > 0) {
  if (confirm("确定删除选中记录？")) {
  grid.loading("操作中，请稍后......");
  nui.ajax({
  url: "com.primeton.zk.caozengling.queryEntities.deleteBooks.biz.ext",
  type: "post",
  data: json,
  cache: false,
  contentType: 'text/json',
  success: function (text) {
  grid.reload();
  },
  error: function () {
  }
  });
  }
  } else {
  alert("请选中一条记录");
  }
  }
  //保存
  function saveData() {
  var data = {employees:grid.getChanges()};
  var json = nui.encode(data);
   
  grid.loading("保存中，请稍后......");
  nui.ajax({
  url: "com.primeton.zk.caozengling.queryEntities.saveBooks.biz.ext",
  type: 'POST',
  data: json,
  success: function (text) {
  grid.reload();
  },
  error: function (jqXHR, textStatus, errorThrown) {
  alert(jqXHR.responseText);
  }
  });
  }
   
  //查找
  function search() {
  var key = nui.get("key").getValue();
  grid.load({ key: key });
  }
  function onKeyEnter(e) {
  search();
  }
  /////////////////////////////////////////////////
  function onBirthdayRenderer(e) {
  var value = e.value;
  if (value) return nui.formatDate(value, 'yyyy-MM-dd');
  return "";
  }
  function onMarriedRenderer(e) {
  if (e.value == 1) return "是";
  else return "否";
  }
  var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'},{ id: 3, text: '不男不女'}];
  function onGenderRenderer(e) {
  for (var i = 0, l = Genders.length; i < l; i++) {
  var g = Genders[i];
  if (g.id == e.value) return g.text;
  }
  return "";
  }
  //调薪
  function tiaoxin() {
  var rows = grid.getSelecteds();
  var data = {employee:rows};
  var json = nui.encode(data);
  if (rows.length > 0) {
  if (confirm("确定调薪？")) {
  grid.loading("操作中，请稍后......");
  nui.ajax({
  url: "com.primeton.zk.caozengling.queryEntities.tiaoxin.biz.ext",
  type: "post",
  data: json,
  cache: false,
  contentType: 'text/json',
  success: function (text) {
  grid.reload();
  },
  error: function () {
  }
  });
  }
  } else {
  alert("请选中一条记录");
  }
  }
   
   
  function ExportExcel() {
  var columns = grid.getBottomColumns();
   
  function getColumns(columns) {
  columns = columns.clone();
  for (var i = columns.length - 1; i >= 0; i--) {
  var column = columns[i];
  if (!column.field) {
  columns.removeAt(i);
  } else {
  var c = { header: column.header, field: column.field };
  columns[i] = c;
  }
  }
  return columns;
  }
   
  var columns = getColumns(columns);
  var json = nui.encode(columns);
  document.getElementById("excelData").value = json;
  var excelForm = document.getElementById("excelForm");
  excelForm.submit();
   
  }
  </script>
   
   
   
  </div>
  </body>
  </html>
posted @ 2016-05-09 10:16  caozengling  阅读(464)  评论(0)  编辑  收藏  举报