毕业设计,jQuery实现高级检索功能_jquery_脚本之家金沙8331网址:

初学JQuery,写了三个尖端找寻的动态输入框,如图所示:

开张介绍有关EasyUI才具,分界面部分的局地应用知识,包罗控件的赋值、取值、清空,以致有关的行使。

福如东海的效率:


*
当选取属性下拉框中差别类别的习性时,前边弹出不一致数额的和不一样格式的文本框(字符串弹出多个输入文本框,数字型的弹出八个输入文本框,日期型的弹出五个日子接受控件);

大家知道,经常Web分界面包括的分界面控件有:单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选拔、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提醒音讯、列表控件等,那些分界面控件的操作都有何样差异,上面大家来挨门逐户实行介绍。

* 单击“加多条件”链接后,下边会大增一行条件输入,可以选拔逻辑、属性。

金沙8331网址 1

html部分代码如下:

1、单行文本框

使用easyui的控件,单行文本能够应用easyui-validatebox样式就可以,类型为text的控件。

金沙8331网址 2

分界面代码如下所示:

<input  type="text"  name="Name" />或者<input type="text" ID="txtLoginName" name="txtLoginName" style="width:100px"  />

赋值给分界面控件代码如下:

$.val(info.Name);

收获分界面控件的值代码如下:

var name = $.val();

毕业设计,jQuery实现高级检索功能_jquery_脚本之家金沙8331网址:。若是是标签Lable控件,那必要把val 使用text代替就可以,如下代码所示:

$.text(info.Name);

对于easyui-validatebox样式的控件,日常的话,有多少个平淡无奇属性能够安装他们的。

金沙8331网址 3

//必输项: <input  type="text" name="name" data-options="required:true"></input>//格式的验证: <input  type="text" name="email" data-options="validType:'email'"></input> <input  type="text" name="email" data-options="required:true,validType:'url'"></input>//长度范围的验证: <input  data-options="validType:'length[1,3]'">

金沙8331网址 4

< div id= "0" class ="row" > < dd >  与   或 option> 非    < dd >< select id= "attrlist" class= "span2" style = 'width:110px;' >     < dd>  dd> < dd>  --< input type= "text" class = "span2 search-query" > < dd> < input type= "text" id = "datetimepicker1"> --    < dd>  搜索 button> dd> < dd>  添加条件    < div id= "lastrow" >

< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" > script >< script type= "text/javascript" >//用于动态修改新生成的节点id,便于定位子节点,为其添加事件var conditionCount=1;$.ready{ $; $; $; //为初始节点添加事件 selectClick; //日期选择控件参数设置 $( '#[id*=datetimepicker]').datetimepicker({ format: 'yyyy-mm-dd', todayBtn: true, startView:4, minView:2, maxView:4, startView:4, todayHighlight: true, initialDate: new Date(), autoclose: true, }); //为“添加条件”添加事件 $.click{ var $nextrow=$; //克隆初始节点 $nextrow.attr; //修改复制的节点id,用于定位子节点 $.before; $( https://www.jb51.net/article/"+conditionCount+ " select[id='condition']").show(); $( https://www.jb51.net/article/"+conditionCount+ " input[id='rangestart']").show(); $( https://www.jb51.net/article/"+conditionCount+ " div[id='rangeend']" ).hide(); $( https://www.jb51.net/article/"+conditionCount+ " div[id='timerange']" ).hide(); $( https://www.jb51.net/article/"+conditionCount+ " div[id='clickgroup']" ).hide(); var $t1=$( https://www.jb51.net/article/"+conditionCount+ " div[id='timerange']").children(); var at=$t1.attr; $t1.attr( "id",at+ ""+conditionCount); $t1=$t1.next(); var at1=$t1.attr; $t1.attr( "id",at1+ ""+conditionCount); //为新插入的节点添加事件 selectClick; conditionCount++; $( '#[id*=datetimepicker]').datetimepicker({ format: 'yyyy-mm-dd', todayBtn: true, startView:4, minView:2, maxView:4, startView:4, todayHighlight: true, initialDate: new Date(), autoclose: true, }); });}); function selectClick{ /* 三个对象如果放在这里定义的话会出错,每个选择事件都会控制最下面一行的文本框的显示,如果在下面三个事件中分别添加这三行,则事件触发正常 $start=$("div[]>dd>input[id='rangestart']"); $end=$("div[]>dd>div[id='rangeend']"); $time=$("div[]>dd>div[id='timerange']"); */ $( https://www.jb51.net/article/"+flag+ ">dd>select[id='attrlist']>option[value*='Date']" ).click{ $start=$( "div[]>dd>input[id='rangestart']" ); $end=$( "div[]>dd>div[id='rangeend']" ); $time=$( "div[]>dd>div[id='timerange']" ); $start.hide; $time.show; $( https://www.jb51.net/article/"+flag+ ">dd>select[id='attrlist']>option[value*='String']" ).click{ $start=$( "div[]>dd>input[id='rangestart']" ); $end=$( "div[]>dd>div[id='rangeend']" ); $time=$( "div[]>dd>div[id='timerange']" ); $start.show; $time.hide; $( https://www.jb51.net/article/"+flag+ ">dd>select[id='attrlist']>option[value*='Float']" ).click{ $start=$( "div[]>dd>input[id='rangestart']" ); $end=$( "div[]>dd>div[id='rangeend']" ); $time=$( "div[]>dd>div[id='timerange']" ); $start.show; $time.hide; } script>

2、多行文本框

easyui的界面样式,能够利用easyui-validatebox,大概暗许的textarea就可以。

金沙8331网址 5

界面代码如下所示:

<textarea   required="true" style="height:100px;"></textarea>

或者

<textarea style="height:60px;width:200px"  name="Remark"></textarea>

赋值给分界面控件代码如下:

$("#type_Remark").val(json.Remark);

得到分界面控件的值代码如下:

 var text = $("#type_Remark").val();    

如上便是本文的全体内容,希望对大家的求学抱有助于,也可望咱们多多点拨脚本之家。

3、密码文本框

密码文本框和健康的文本框相通,只是输入字符的时候,系统做了隐讳突显而已,把它看做一个来单独表达,也是因为它也是管见所及输入的一种。

金沙8331网址 6

界面代码如下所示:

 <input type="password" name="password" style="width:260px;"></input>

赋值给分界面控件代码如下:

var password = '123';$("#Password").val

取得分界面控件的值代码如下:

金沙8331网址 7

            $("#btnLogin").click(function () {                var postData = {                    UserName: $("#UserName").val(),                    Password: $("#Password").val(),                    Code: $.val()                };

金沙8331网址 8

4、下拉列表Combobox

科普的EasyUI的ComboBox是足以输入,也得以从列表选拔的开始和结果的输入控件。

金沙8331网址 9

分界面代码如下所示:

<input  type="text"  name="PID" />

绑定下拉列表的多寡源代码如下:

            $('#type_PID1').combobox({                url: '/DictType/GetDictJson',                valueField: 'Value',                textField: 'Text'            });

安装控件的选取的源委代码如下:

$("#type_PID1").combobox('setValue', json.PID);

赢得分界面控件的值代码如下:

var systemType=  $("#txtSystemType_ID").combobox('getValue');

而使用标准的Select控件即便能够兑现从列表选取,但是相当不够ComboBox控件那么灵活方便,Select控件的分界面代码如下:

金沙8331网址 10

<select  style="width: 100%" > </select>

5、日期输入控件

easyui使用class=‘easyui-datebox’来标记日期控件,从弹出的层中选拔精确的日期,是一种非凡广阔的分界面输入控件,能够替代My97DatePicker日期输入控件。

金沙8331网址 11

弹出窗体分界面效果如下。

金沙8331网址 12

它的分界面代码如下所示:

<input  type="text" ID="txtLastUpdated" name="txtLastUpdated" style="width:100px"  />

赋值给分界面控件代码如下:

$("#LastUpdated").datebox('setValue', info.LastUpdated);

得到分界面控件的值代码如下:

var lastupate = $("#txtLastUpdated").datebox('getValue');

6、数值输入控件

easyui使用样式easyui-numberbox标记为数值类型,其变现为文本框,但一定要输入数值。

金沙8331网址 13

分界面代码如下所示:

<input  data-options="min:10,max:90,precision:2,required:true">

要么使用‘easyui-numberspinner’样式来标记,能够上下调度数值。

金沙8331网址 14

<input  data-options="min:10,max:100,required:true" style="width:80px;"></input>

赋值给分界面控件代码如下:

$.numberbox('setValue', 206.12);

或者

$.numberspinner('setValue', 8234725); 

获得分界面控件的值代码如下:

var v = $.numberbox('getValue');

或者

var v = $.numberspinner('getValue');

7、单项选用Radio控件

单项选用Radio控件,是在多项内容之中选取三个增大选行保存依然展现。

金沙8331网址 15

分界面代码如下所示:

金沙8331网址 16

                    <tr>                        <th>                            <label>数据分开方式:</label>                        </th>                        <td>                            <input name="SplitType" type="radio"  checked="checked" required="true" value="Split">分隔符方式,多个数据中英文逗号,分号,斜杠或顿号[, , ; ; / 、]分开,或一行一个                             <br />                            <input name="SplitType" type="radio"  required="true" value="Line">一行一个记录模式,忽略所有分隔符号                        </td>                    </tr>

金沙8331网址 17

赋值给分界面控件代码如下:

$('input:radio[name="SplitType"][value="Split"]').prop('checked', true);

获得界面控件的值代码如下:

$("input[name='SplitType']:checked").val()

照旧应用Comobo控件作为单项接受的控件也是能够的,界面效果如下所示。

金沙8331网址 18

其分界面代码如下所示:

金沙8331网址 19

    <select  style="width:150px"></select>    <div >        <div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>        <input type="radio" name="lang" value="01">Java<br/>        <input type="radio" name="lang" value="02">C#<br/>        <input type="radio" name="lang" value="03">Ruby<br/>        <input type="radio" name="lang" value="04">Basic<br/>        <input type="radio" name="lang" value="05">Fortran    </div>    <script type="text/javascript">        $(function(){            $.combo({                required:true,                editable:false            });            $.appendTo.combo;            $('#sp input').click(function(){                var v = $.val();                var s = $.next.text();                $.combo('setValue', v).combo('setText', s).combo('hidePanel');            });        });    </script>

金沙8331网址 20

8、复选框

复选框是在一项或多项内容中,选拔零项大概多项的多个输入分界面控件。

金沙8331网址 21

分界面代码如下所示:

<input  type="checkbox" >帐号过期

由于复选框的一部分极度性质,在表单提交的时候,若无勾选的选型,使用serializeArray(卡塔尔国方法组织的多寡,复选框的值则不会被交付。

传闻那一个缘故,我们可以使用Select控件举行代替,达成复选项的成效,而不影响

var postData = $("#ffEdit").serializeArray();

上述代码的行使。

金沙8331网址 22

应用Select控件的代码如下所示。

<select   name="Visible">          <option value="true" selected>正常</option>          <option value="false">不可见</option> </select>

赋值给分界面控件代码如下:

$("#Visible1").prop('checked', info.Visible);

获得分界面控件的值代码如下:

var visible = $("#txtVisible").val();

9、表格控件DataGrid

easyui的列表控件,能够透过点名table的class属性为easyui-datagrid就能够兑现表格的定义,分界面代码如下所示:

金沙8331网址 23

<table  title="Basic DataGrid" style="width:700px;height:250px"            data-options="singleSelect:true,collapsible:true,url:'../datagrid/datagrid_data1.json'">        <thead>            <tr>                <th data-options="field:'itemid',width:80">Item ID</th>                <th data-options="field:'productid',width:100">Product</th>                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>                <th data-options="field:'attr1',width:250">Attribute</th>                <th data-options="field:'status',width:60,align:'center'">Status</th>            </tr>        </thead>    </table>

金沙8331网址 24

然则为了防止使用脚本定义datagrid导致数十次起始化的难点,大家日常只须要钦赐三个table代码就能够,分界面如下所示

            <table  style="width: 1024px" title="用户操作" iconcls="icon-view">                        </table>

而表格控件的数量加载,大家运用javascript进行开端化,起先化后的报表分界面呈现效果如下所示。

金沙8331网址 25

Javascript代码如下所示,此中的width: function (卡塔尔(قطر‎ { return
document.body.clientWidth * 0.9 }是用来完结宽度自适应的八个操作。

金沙8331网址 26

        //实现对DataGird控件的绑定操作        function InitGrid(queryData) {            $.datagrid({   //定位到Table标签,Table标签的ID是grid                url: '/Menu/FindWithPager',   //指向后台的Action来获取当前菜单的信息的Json格式的数据                title: '功能菜单',                iconCls: 'icon-view',                height: 650,                width: function () { return document.body.clientWidth * 0.9 },                nowrap: true,                autoRowHeight: false,                striped: true,                collapsible: true,                pagination: true,                pageSize: 100,                pageList: [50,100,200],                rownumbers: true,                //sortName: 'ID',    //根据某个字段给easyUI排序                sortOrder: 'asc',                remoteSort: false,                idField: 'ID',                queryParams: queryData,  //异步查询的参数                columns: [[                    { field: 'ck', checkbox: true },   //选择                     { title: '显示名称', field: 'Name', width: 200},                     { title: '图标', field: 'Icon', width: 150 },                     { title: '排序', field: 'Seq', width: 80 },                     { title: '功能ID', field: 'FunctionId', width: 80 },                     { title: '菜单可见', field: 'Visible', width: 80 },                     { title: 'Winform窗体类型', field: 'WinformType', width: 400 },                     { title: 'Web界面Url地址', field: 'Url', width: 200 },                     { title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 },                     { title: '系统编号', field: 'SystemType_ID', width: 80 }                ]],                toolbar: [{                    id: 'btnAdd',                    text: '添加',                    iconCls: 'icon-add',                    handler: function () {                        ShowAddDialog();//实现添加记录的页面                    }                }, '-', {                    id: 'btnEdit',                    text: '修改',                    iconCls: 'icon-edit',                    handler: function () {                        ShowEditOrViewDialog();//实现修改记录的方法                    }                }, '-', {                    id: 'btnDelete',                    text: '删除',                    iconCls: 'icon-remove',                    handler: function () {                        Delete();//实现直接删除数据的方法                    }                }, '-', {                    id: 'btnView',                    text: '查看',                    iconCls: 'icon-table',                    handler: function () {                        ShowEditOrViewDialog;//实现查看记录详细信息的方法                    }                }, '-', {                    id: 'btnReload',                    text: '刷新',                    iconCls: 'icon-reload',                    handler: function () {                        //实现刷新栏目中的数据                        $.datagrid;                    }                }],                onDblClickRow: function (rowIndex, rowData) {                    $.datagrid('uncheckAll');                    $.datagrid('checkRow', rowIndex);                    ShowEditOrViewDialog();                }            })        };

金沙8331网址 27

对此查询开关触发的多寡后台查询及数码绑定操作,javascript代码如下所示:

金沙8331网址 28

        //绑定查询按钮的的点击事件        function BindSearchEvent() {            //按条件进行查询数据,首先我们得到数据的值            $("#btnSearch").click(function () {                //得到用户输入的参数,取值有几种方式:$.combobox('getValue'), $.datebox('getValue'), $.val()                //字段增加WHC_前缀字符,避免传递如URL这样的Request关键字冲突                var queryData = {                    WHC_ID: $.val(),                    WHC_Name: $("#txtName").val(),                    WHC_Icon: $("#txtIcon").val(),                    WHC_Seq: $("#txtSeq").val(),                    WHC_FunctionId: $("#txtFunctionId").val(),                    WHC_Visible: $("#txtVisible").val(),                    WHC_WinformType: $("#txtWinformType").val(),                    WHC_Url: $("#txtUrl").val(),                    WHC_WebIcon: $("#txtWebIcon").val(),                    WHC_SystemType_ID: $("#txtSystemType_ID").val()                }                //将值传递给                InitGrid(queryData);                return false;            });        }

金沙8331网址 29

通过结构一些查询参数并传递相应的值,后台依据那几个参数,从对应调整器的分页方法FindWithPager收获相应的分页数据,并绑定到grid控件中。

除此以外,假诺急需在grid里面扩展部分图形可能链接什么的,应该怎样操作呢?

正如分界面所示的服从:

金沙8331网址 30

首先供给在初步化代码里面增添列的formatter回调函数,如下所示。

金沙8331网址 31

                columns: [[                    { field: 'ck', checkbox: true },   //选择                     { title: '显示名称', field: 'Name', width: 200},                     { title: '图标', field: 'Icon', width: 150 },                     { title: '排序', field: 'Seq', width: 80 },                     { title: '功能ID', field: 'FunctionId', width: 80 },                     {                         title: '菜单可见', field: 'Visible', width: 80, formatter: function (val, rowdata, index) {                             if  {                                 return '<a  href="javascript:void" >' + val + '</a>';                             } else {                                 return '<a  href="javascript:void" >' + val + '</a>';                             }                         }                     },                     { title: 'Winform窗体类型', field: 'WinformType', width: 400 },                     { title: 'Web界面Url地址', field: 'Url', width: 200 },                     { title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 },                     { title: '系统编号', field: 'SystemType_ID', width: 80 }                ]],

金沙8331网址 32

在formatter回调函数里面增添逻辑代码,剖断是或不是可以预知,其实正是充实多个图片按键,可是图片按键的样式设置,必得在加载数据截止后工夫操作,因而必要在函数里面管理。

                onLoadSuccess: function () {                    $(".grid_visible").linkbutton({ text: '可见', plain: true, iconCls: 'icon-ok' });                    $(".grid_unvisible").linkbutton({ text: '不可见', plain: true, iconCls: 'icon-stop' });                },

譬喻呈现的图形缺损,设置行的机动调解中度属性为true就能够。

autoRowHeight:true

10、树形控件

即使easyui也是有Tree控件,可是本人较心仪使用zTree这些树形控件,那么些是一个免费的Jquery树控件。

金沙8331网址 33

援用代码如下所示:

    <link href="~/Content/JQueryTools/JQueryTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />    <script src="~/Content/JQueryTools/JQueryTree/js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>

初叶化在Tree树控件的分界面代码如下所示:

金沙8331网址 34

    <script type="text/javascript">     <!--        var setting = {            data: {                simpleData: {                    enable: true                }            },            callback: {                onClick: onClick,                onDblClick: onDblClick            }        }        //重新加载树形结构        function reloadTree() {            $("#loading").show();            $.getJSON("/DictType/GetTreeJson?r=" + Math.random(), function  {                $.fn.zTree.init($("#treeDemo"), setting, json);                $.fn.zTree.getZTreeObj("treeDemo").expandAll;                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");                var treeNodes = treeObj.getNodes();                if (treeNodes != null) {                    loadTypeData(treeNodes[0].id);                }            });            $("#loading").fadeOut;        }        //树单击节点操作        function onClick(event, treeId, treeNode, clickFlag) {            var id = treeNode.id;            loadTypeData;        }        //树双击节点操作        function onDblClick(event, treeId, treeNode) {            var id = treeNode.id;            loadTypeData;            ShowDictType;        }

金沙8331网址 35

11、布局控件

EasyUI通过DIV层来支配构造的来得,DIV里面增添三个Region的本性用来分别属于哪个区域,如下图是自家Web开拓框架的分界面布局成效图。

金沙8331网址 36

分界面代码如下所示:

金沙8331网址 37

笔者们详细查看主职业区的代码,如下所示。

    <!--主工作区-->    <div  region="center" title="" style="overflow:hidden;">        <div    fit="true" border="false" >        </div>    </div>

里面词典管理在那之中还应该有子构造的显得,大家查阅词典管理之中分界面代码,如下所示。

金沙8331网址 38

    <div  style="width:700px;height:700px;" fit="true">        <div data-options="region:'west',split:true,title:'字典类别',iconCls:'icon-book'" style="width: 300px; padding: 1px;">            <div style="padding: 1px; border: 1px solid #ddd;">                                .......................</div>            <div>                <ul  >                </ul>            </div>        </div>        <div  data-options="region:'center',title:'字典数据',iconCls:'icon-book'" style="padding:5px;height:auto">                            <!-------------------------------详细信息展示表格----------------------------------->            <table  style="width: 940px" title="用户操作" iconcls="icon-view"></table>        </div>    </div>

金沙8331网址 39

12、弹出式对话框

EasyUI弹出式对话框用的比很多,对话框的分界面代码放在DIV层里面,平日在分界面整个分界面加载后中已经初始化了,只是大家遵照条件日常适当的层就可以,那样就变成了弹出式对话框,弹出式对话框有多少个遮罩的职能。

金沙8331网址 40

界面代码如下所示:

金沙8331网址 41

13、提醒新闻

在例行的Web分界面提醒里面,大家日常用纯粹的javascript的alert函数来進展音讯的提示,假使在基于EasyUI的分界面构造和演示里面,使用那一个提示显明会和分界面演示非常不够相配,因而大家使用messager类来开展对应的提醒新闻管理,轻巧的剧本提示代码如下。

$.messager.alert("提示", "修改成功");

金沙8331网址 42

提示新闻也能够特别助长,增多Logo等音讯,分界面代码如下所示。

金沙8331网址 43

    <script>        function alert1(){            $.messager.alert('My Title','Here is a message!');        }        function alert2(){            $.messager.alert('My Title','Here is a error message!','error');        }        function alert3(){            $.messager.alert('My Title','Here is a info message!','info');        }        function alert4(){            $.messager.alert('My Title','Here is a question message!','question');        }        function alert5(){            $.messager.alert('My Title','Here is a warning message!','warning');        }    </script>

金沙8331网址 44

对于日常的去除操作,平时常有一个提示确认的信息框,那一个messager类也拓宽了打包管理,效果也不利。

金沙8331网址 45

分界面代码如下所示。

金沙8331网址 46

                $.messager.confirm("删除确认", "您确认删除选定的记录吗?", function (deleteAction) {                    if (deleteAction) {                        $.get("/DictData/DeletebyIds", postData, function  {                            if (data == "true") {                                $.messager.alert("提示", "删除选定的记录成功");                                $.datagrid;                                //当删除完成之后,第二次删除的时候还记得上次的信息,这样是不可以的,所以我们需要清除第一次的信息                                                                rows.length = "";//第一种方法                                                                $.datagrid("clearSelections");//第二种方法                            }                            else {                                $.messager.alert("提示", data);                            }                        });                    }                });

金沙8331网址 47

上述正是自己Web开拓框架之中常用到的局地分界面控件体现以致相关的代码介绍,有局地不太常用的控件大概还尚无在本文中牵线,款待大家展开增加补充和座谈,今后不常光持续康健那一个随笔,作为依靠ASp.net+EasyUI的框架分界面包车型大巴叁个很好的参阅。希望大家欣赏,多多提意见。

发表评论

电子邮件地址不会被公开。 必填项已用*标注