jquery easy ui 简单字段选择搜索实现

最新推荐文章于 2021-09-10 15:28:09 发布
weixin_34049032
最新推荐文章于 2021-09-10 15:28:09 发布
阅读量200
点赞数
文章标签： javascript ui ViewUI
原文链接：https://segmentfault.com/a/1190000004211700
版权
写的比较粗糙，望见谅。
要实现的效果：
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI Application Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="panelinfo" class="easyui-panel" title="My Panel" style="width:300px;height:250px;padding:10px;" >
        <div class="ftitle">User Information</div>
        <form id="ff" action="" method="post" enctype="multipart/form-data">
            <table>
                <tr>
                    <td>Account:</td>
                    <td><input id="account" name="account" class="f1 easyui-textbox easyui-searchbox" data-options="searcher:doSearch" /></td>
                </tr>
                <tr>
                    <td>Name:</td>
                    <td><input id="name" name="name" class="f1 easyui-textbox" /></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input id="email" name="email" class="f1 easyui-textbox" /></td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input id="phone" name="phone" class="f1 easyui-textbox" /></td>
                </tr>
            </table>
        </form>
    </div>
    <div id="dlg" class="easyui-dialog" style="width:220px;height:450px;" data-options="title:'Select User Info',toolbar:'#dlg-toolbar',buttons: '#dlg-buttons',modal:true">
        <table id="dg" data-options="singleSelect:true"></table>
    </div>
    <div id="dlg-toolbar" style="padding:2px 0">
        <input class="easyui-searchbox" data-options="prompt:'Please input somthing',searcher:doSearchUser" style="width:100%" />
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:doSelect()">Select</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">Close</a>
    </div>

    <script type="text/javascript">
        var data = [
            {'dlg_accoutn':'100000', 'dlg_name':'00000'},
            {'dlg_accoutn':'100001', 'dlg_name':'11111'},
            {'dlg_accoutn':'100002', 'dlg_name':'22222'},
            {'dlg_accoutn':'100003', 'dlg_name':'33333'},
            {'dlg_accoutn':'100004', 'dlg_name':'44444'},
            {'dlg_accoutn':'100005', 'dlg_name':'55555'},
            {'dlg_accoutn':'100006', 'dlg_name':'66666'},
            {'dlg_accoutn':'100007', 'dlg_name':'77777'},
            {'dlg_accoutn':'100008', 'dlg_name':'88888'},
            {'dlg_accoutn':'100009', 'dlg_name':'99999'},
            {'dlg_accoutn':'100010', 'dlg_name':'111000'},
            {'dlg_accoutn':'100011', 'dlg_name':'222111'},
            {'dlg_accoutn':'100012', 'dlg_name':'333222'},
            {'dlg_accoutn':'100013', 'dlg_name':'444333'},
            {'dlg_accoutn':'100014', 'dlg_name':'555444'},
            {'dlg_accoutn':'100015', 'dlg_name':'666555'},
            {'dlg_accoutn':'100016', 'dlg_name':'777666'},
            {'dlg_accoutn':'100017', 'dlg_name':'888777'},
            {'dlg_accoutn':'100018', 'dlg_name':'999888'},
            {'dlg_accoutn':'100019', 'dlg_name':'111222'},
            {'dlg_accoutn':'100020', 'dlg_name':'222333'},
            {'dlg_accoutn':'100021', 'dlg_name':'333444'},
            {'dlg_accoutn':'100022', 'dlg_name':'444555'}
        ];

        $(function() {
            $('#dlg').dialog('close');
        })

        function doSelect () {
            var row = $('#dg').datagrid('getSelected');
            console.log(row);
            if (row) {
                $('#account').textbox('setValue',row['dlg_accoutn']);
                $('#account').textbox('setText',row['dlg_accoutn']);
                $('#name').textbox('setValue',row['dlg_name']);
                $('#name').textbox('setText',row['dlg_name']);
            };
            $('#dlg').dialog('close');
        }

        function doSearch () {
            $('#dlg').dialog('open');
            $('#dg').datagrid({
                data:data,
                columns:[[
                    {field:'dlg_accoutn',title:'Account',width:100},
                    {field:'dlg_name',title:'Name',width:100}
                ]]
            });
        }

        function doSearchUser () {
            var tmp = [
            {'dlg_accoutn':'100017', 'dlg_name':'888777'},
            {'dlg_accoutn':'100018', 'dlg_name':'999888'},
            {'dlg_accoutn':'100019', 'dlg_name':'111222'},
            {'dlg_accoutn':'100020', 'dlg_name':'222333'},
            {'dlg_accoutn':'100021', 'dlg_name':'333444'},
            {'dlg_accoutn':'100022', 'dlg_name':'444555'}];
            $('#dg').datagrid('loadData',tmp);
            //$('#dg').datagrid('reload');
        }
    </script>
</body>
</html>
weixin_34049032
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫