<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>树形联动</title> <link href="../demo.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body{ margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden; } </style> <script src="../../scripts/boot.js" type="text/javascript"></script> <!--引入皮肤样式--> <link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="mini-splitter" style="100%;height:100%;"> <div size="240" showCollapseButton="true"> <div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;"> <span style="padding-left:5px;">名称：</span> <input class="mini-textbox" /> <a class="mini-button" iconCls="icon-search" plain="true">查找</a> </div> <div class="mini-fit"> <ul id="tree1" class="mini-tree" url="../data/deptTree.txt" style="100%;" showTreeIcon="true" textField="name" idField="id" parentField="pid" resultAsTree="false" > </ul> </div> </div> <div showCollapseButton="true"> <div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;"> <a class="mini-button" iconCls="icon-add" plain="true" onclick="addRow()">新增</a> <a class="mini-button" iconCls="icon-remove" plain="true" onclick="removeRow()">删除</a> <span class="separator"></span> <a class="mini-button" iconCls="icon-save" plain="true" onclick="saveData()">保存</a> </div> <div class="mini-fit" > <div id="grid1" class="mini-datagrid" style="100%;height:100%;" borderStyle="border:0;" url="../data/AjaxService.aspx?method=GetDepartmentEmployees" showFilterRow="true" allowCellSelect="true" allowCellEdit="true" > <div property="columns"> <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号 <input property="editor" class="mini-textbox" style="100%;"/> </div> <div field="name" width="120" headerAlign="center" allowSort="true">员工姓名 <input property="editor" class="mini-textbox" style="100%;"/> <input id="nameFilter" property="filter" class="mini-textbox" onvaluechanged="onNameFilterChanged" style="100%;" /> </div> <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性别 <input property="editor" class="mini-combobox" style="100%;" data="Genders"/> </div> <div field="age" width="100" allowSort="true">年龄 <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="100%;"/> </div> <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期 <input property="editor" class="mini-datepicker" style="100%;"/> </div> <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div> </div> </div> </div> </div> </div> <script type="text/javascript"> mini.parse(); var tree = mini.get("tree1"); var grid = mini.get("grid1"); tree.on("nodeselect", function (e) { if (e.isLeaf) { grid.load({ dept_id: e.node.id }); } else { grid.setData([]); grid.setTotalCount(0); } }); ////////////////////////////////////////////// var Genders = [{ id: 1, text: '男' }, { id: 2, 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 onNameFilterChanged(e) { var textbox = e.sender; var key = textbox.getValue(); var node = tree.getSelectedNode(); if (node) { grid.load({ dept_id: node.id, key: key }); } } function addRow() { var node = tree.getSelectedNode(); if (node) { var newRow = { name: "New Row" }; newRow.dept_id = node.id; grid.addRow(newRow, 0); } } function removeRow() { var rows = grid.getSelecteds(); if (rows.length > 0) { grid.removeRows(rows, true); } } function saveData() { var data = grid.getChanges(); var json = mini.encode(data); grid.loading("保存中，请稍后......"); $.ajax({ url: "../data/AjaxService.aspx?method=SaveEmployees", data: { data: json }, type: "post", success: function (text) { grid.reload(); }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText); } }); } </script> </body> </html>