快乐的小狮子 2018-03-26 09:29 采纳率: 0%
浏览 2250
已结题

miniui.js多条件筛选的实现方法

miniui.js多条件筛选的实现方法,怎么写也写不对跪求大神指点,根据姓名,年龄,性别,查找出对应员工。自己在网上对照写的不太对,跪求

 <!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>
<title>员工信息测试表</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="../demo.css" rel="stylesheet" type="text/css" />


<script src="../../scripts/boot.js" type="text/javascript"></script>


</head>
<body>
    <h1>员工详细信息查询表</h1>
    <fieldset style="width:700px;border:solid 1px #aaa;margin-top:8px;position:relative;">
        <legend>员工详细信息</legend>
        <div id="editForm1" style="padding:5px;">
            <input class="mini-hidden" name="id"/>
            <table style="width:100%;">
                <tr>
                    <td style="width:80px;">姓名:</td>
                    <td style="width:150px;"><input id="name" name="name" class="mini-textbox" /></td>
                    <td>性别:</td>
                    <td><input id="gender" name="gender" class="mini-combobox" data="Genders"/></td>
                </tr>
                <tr>
                    <td>年龄:</td>
                    <td><input id="age" name="age" class="mini-spinner" minValue="0" maxValue="65" value="25"  /></td>
                    <td>出生日期:</td>
                    <td><input id="birthday" name="birthday" class="mini-datepicker" /></td>
                </tr>
            </table>
        <span>精确查找:</span>
        <!-- <input type="text" id="key" /> -->
        <input type="button" value="查找" onclick="search(name,gender,age,birthday)" />
        </div>
    </fieldset>

    <div id="datagrid1" class="mini-datagrid"
        style="width: 725px; height: 250px;"
        url="../data/AjaxService.jsp?method=SearchEmployees" idField="id"
        multiSelect="true" allowResize="true">
        <div property="columns">
            <div type="checkcolumn"></div>
            <div field="name" width="100" headerAlign="center" allowSort="true">名称</div>
            <div field="gender" width="100" allowSort="true"
                renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
            <div field="age" width="100" allowSort="true">年龄</div>
            <div field="birthday" width="100" allowSort="true"
                dateFormat="yyyy-MM-dd">出生日期</div>
            <div field="createtime" width="100" headerAlign="center"
                dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
        </div>
    </div>

    <script type="text/javascript">
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];

        mini.parse();

        var grid = mini.get("datagrid1");
        grid.load();

        /* //多条件筛选
        function filter(fn) {
            var list =document.getElementsByTagName('body')[0]
            .getElementsByTagName('tbody')[0].rows;
            var size=list.length;
            var tr;
            for(var i=0;i<size;i++) {
                tr =[list];
                tr.removeAttrubute('class', 'hide')
                if(!fn(tr)) {
                    tr.setAttribute('class','hide');
                }
            }
        }

        function value(id) {
            return document.getElementById(id).value;
        }

        function search() {
            var sex = document.getElement.getElementById('name');
            var gender= document.getElement.getElementById('gender');
            var gender=document.getElement.getElementById('age') ;

            filter(function(tr)) {
                if(gender && tr.cells[0].innerHTML != gender) {
                    return false;
                }
                 if(name && tr.cells[1].innerHTML.indexOf(name) < 0) {
                        return false;
                    }
                    if(course && tr.cells[2].innerHTML.indexOf(course) < 0) {
                        return false;
                    }
                    return true;
            }
        } 

 */        //绑定表单
        var db = new mini.DataBinding();
        db.bindForm("editForm1", grid);

        //查找表单
         function search() {
            var key = document.getElementById("name").value;
            grid.load({ key: name });
        }
        $("#key").bind("keydown", function (e) {
            if (e.keyCode == 13) {
                search();
            }
        });

        ///////////////////////////////////////////////////////
        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 "";
        }
        ////////////////////////////////////////////////////////




    </script>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • Leaderxin 2018-04-03 02:15
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热(温度不同)的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟,应力应变曲线问题
  • ¥30 python代码,帮调试
  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能!!有偿