Graduation Design ASP. Net + EasyUI development X open pit mine scheduling management information system (I), easyui open pit mine

Graduation Design ASP. Net + EasyUI development X open pit mine scheduling management information system (I), easyui open pit mine

This section describes how to use EasyUI, including the assignment, value, clearing, and usage of controls.

 

We know that the general Web interface includes the following interface controls: single-row text box, multi-row text box, Password text box, drop-down list Combobox, Date input control, numeric input control, single choice, check box, table control DataGrid, tree control, layout control, pop-up dialog box, prompt information, list controls, etc, the operations of these interface controls are different. Next we will introduce them one by one.

 

 

1. Single Row text box

 

With the easyui control, you can use the easyui-validatebox style for a single line of text.

 

 

The interface code is as follows:

 

<Input class = "easyui-validatebox" type = "text" id = "Name" name = "Name"/> or <input type = "text" ID = "txtLoginName" name = "txtLoginName" >$ ("# Name "). val (info. name );

 

The code for getting the interface control value is as follows:

 

var name = $("#Name").val();

 

If it is a label Lable control, you need to replace val with text, as shown in the following code:

 

$("#Name").text(info.Name);

 

For easyui-validatebox style controls, there are several common attributes that can be set.

 

// Mandatory: <input class = "easyui-validatebox" type = "text" name = "name" data-options = "required: true "> </input> // format verification: <input class =" easyui-validatebox "type =" text "name =" email "data-options =" validType: 'email '"> </input> <input class =" easyui-validatebox "type =" text "name =" email "data-options =" required: true, validType: 'url' "> </input> // verification of the length range: <input class =" easyui-validatebox "data-options =" validType: 'length [1, 3] '">

 

 

 

2. Multi-line text box

 

You can use easyui-validatebox or the default textarea.

 

 

The interface code is as follows:

 

<textarea id="type_Remark" class="easyui-validatebox" required="true"><textarea>$("#type_Remark").val(json.Remark);

 

The code for getting the interface control value is as follows:

 

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

 

 

 

3. Password text box

 

The password text box is the same as the common text box. It is only used as an independent description when a character is entered, because it is also a common input.

 

 

The interface code is as follows:

 

 <input type="password" name="password">var password = '123';$("#Password").val(password)

 

The code for getting the interface control value is as follows:

 

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

 

 

 

4. drop-down list Combobox

 

The common EasyUI ComboBox is an input control that can be input or selected from the list.

 

 

The interface code is as follows:

 

<input class="easyui-combobox" type="text" id="type_PID1" name="PID" />

 

The source code of the Data bound to the drop-down list is as follows:

 

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

 

The code for setting the control selection is as follows:

 

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

 

The code for getting the interface control value is as follows:

 

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

 

Although the standard Select control can be used to Select from the list, it is not as flexible and convenient as the ComboBox control. The interface code of the Select control is as follows:

 

 

<select id="txtPID"><input class="easyui-datebox" type="text" ID="txtLastUpdated" name="txtLastUpdated">$("#LastUpdated").datebox('setValue', info.LastUpdated);

 

The code for getting the interface control value is as follows:

 

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

 

 

 

6. Numeric input control

 

Easyui uses the style easyui-numberbox to identify the value type as a text box, but can only enter a value.

 

 

The interface code is as follows:

 

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

 

You can also use the 'easyui-numberspinner 'style to identify and adjust the value up or down.

 

 

<input class="easyui-numberspinner" data-options="min:10,max:100,required:true">$('#nn').numberbox('setValue', 206.12);

 

Or

 

$('#ss').numberspinner('setValue', 8234725); 

 

The code for getting the interface control value is as follows:

 

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

 

Or

 

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

 

 

 

7. Single-choice Radio control

 

The single-choice Radio control selects an option in multiple content to save or display.

 

 

The interface code is as follows:

 

<Tr> <th> <label> data separation method: </label> </th> <td> <input name = "SplitType" type = "radio" class = "easyui-validatebox" checked = "checked" required = "true" value = "Split"> delimiter, separate multiple data with commas (,), semicolons (;), slashes (,), or comma, or one row <br/> <input name = "SplitType" type = "radio" class = "easyui-validatebox" required = "true" value = "Line"> one record mode, ignore all separators </td> </tr>

 

The code for assigning a value to the interface control is as follows:

 

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

 

The code for getting the interface control value is as follows:

 

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

 

 

 

You can also use the Comobo control as a single-choice control. The interface effect is as follows.

 

 

The interface code is as follows:

 

<Select id = "cc">
 
 
 
8. Check box
 
The check box is an input interface control that selects zero or more items in one or more items.
 
 
The interface code is as follows:
 
<Input id = "chkIsExpire" type = "checkbox"> Account Expiration
 
Due to some special properties of the check box, if the selected type is not selected during form submission, data constructed using the serializeArray () method will not be submitted.
 
For this reason, we can use the Select Control for replacement to implement the function of the complex option, without affecting
 
var postData = $("#ffEdit").serializeArray();
 
The above code is used.
 
 
The code for using the Select control is as follows.
 
<Select id = "Visible1" name = "Visible"> <option value = "true" selected> normal </option> <option value = "false"> invisible </option> </select>
 
The code for assigning a value to the interface control is as follows:
 
$("#Visible1").prop('checked', info.Visible);
 
The code for getting the interface control value is as follows:
 
var visible = $("#txtVisible").val();
 
 
 
9. Table Control DataGrid
 
You can define a table by specifying the class attribute of the table as easyui-datagrid. The interface code is as follows:
 
<Table class = "easyui-datagrid" title = "Basic DataGrid">
 
However, to avoid the problem of multiple initialization due to the use of scripts to define the datagrid, we generally only need to specify a table code. The interface is as follows:
 
<Table id = "grid">
// Function InitGrid (queryData) {$ ('# grid') to bind the initird control '). datagrid ({// locate the Table tag. The Table tag ID is grid url: '/Menu/FindWithPager ', // point to the background Action to obtain the data title in Json format of the current menu information: 'function menu ', 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', // sort sortOrder: 'asc ', remoteSort: false, idField: 'id', queryParams: queryData, // columns: [{field: 'ck ', checkbox: true}, // select {title: 'display name', field: 'name ', width: 200 },{ title: 'icons ', field: 'icon', width: 150 },{ title: 'sorted', field: 'seq ', width: 80}, {title: 'function id', field: 'functionid', width: 80}, {title: 'menu Visible ', field: 'visable', width: 80}, {title: 'winform form type', field: 'winformtype ', width: 400}, {title: 'web interface Url address', field: 'url ', width: 200}, {title: 'menu icon of the Web interface ', field: 'webicon', width: 120}, {title: 'System number', field: 'systemtype _ id', width: 80}], toolbar: [{ID: 'btnadd', text: 'add', iconCls: 'icon-add', handler: function () {ShowAddDialog (); // page for adding records}, '-', {id: 'btnedit ', text: 'modify', iconCls: 'icon-edit', handler: function () {ShowEditOrViewDialog (); // Method for modifying records }}, '-', {id: 'btndelete', text: 'delete', iconCls: 'icon-delete', handler: function () {Delete (); // Method for directly deleting data}, '-', {id: 'btnview', text: 'view', iconCls: 'icon-table', handler: function () {ShowEditOrViewDialog ("view "); // Method for viewing record details}, '-', {id: 'btnreload', text: 'refresh ', iconCls: 'icon-reload', handler: function () {// refreshes the data in the column $ ("# grid "). datagrid ("reload") ;}}], onDblClickRow: function (rowIndex, rowData) {$ ('# grid '). datagrid ('uncheckall'); $ ('# grid '). datagrid ('checkrow', rowIndex); ShowEditOrViewDialog ();}})};
 
For the data background query and Data Binding operations triggered by the query button, the javascript code is as follows:
 
// BindSearchEvent () {// click the event function BindSearchEvent () of the BIND query button to query data by conditions. First, we get the data value $ ("# btnSearch "). click (function () {// obtain the user-input parameter. The value can be set to $ ("# id "). combobox ('getvalue'), $ ("# id "). datebox ('getvalue'), $ ("# id "). val () // Add the WHC _ prefix to the field to avoid passing Request keyword conflicts such as URL var queryData = {WHC_ID: $ ("# txtID "). 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 ()} // pass the value to InitGrid (queryData); return false ;});}
 
By constructing some query parameters and passing corresponding values, the background uses the paging method of the corresponding controller based on these parametersFindWithPagerObtain the corresponding paging data and bind it to the grid control.
 
What should I do if I need to add images or links to the grid?
 
The following figure shows the effect:
 
 
 
First, you need to add the formatter callback function of the column in the initialization code, as shown below.
 
Columns: [[{field: 'ck ', checkbox: true}, // select {title: 'display name', field: 'name', width: 200 }, {title: 'icon ', field: 'icon', width: 150}, {title: 'sorted', field: 'seq ', width: 80}, {title: 'function id', field: 'functionid', width: 80}, {title: 'menu Visible ', field: 'visable', width: 80,Formatter: Function (val, rowdata, index) {if (val) {return '<a class = "grid_visible" href = "javascript: void (0) "> '+ val +' </a> ';} else {return' <a class =" grid_unvisible "href =" javascript: void (0) "> '+ val +' </a> ';}}, {title: 'winform type', field: 'winformtype', width: 400 },{ title: 'web interface Url address', field: 'url', width: 200}, {title: 'web interface menu icons ', field: 'webicon', width: 120 }, {title: 'System number', field: 'systemtype _ id', width: 80}],
 
Add the logic code in the formatter callback function to determine whether the image is visible. In fact, two image buttons are added, but the style setting of the image button must be completed after the data is loaded, therefore, it must be processed in the function.
 
OnLoadSuccess: function () {$ (". grid_visible "). linkbutton ({text: 'visible ', plain: true, iconCls: 'icon-OK'}); $ (". grid_unvisible "). linkbutton ({text: 'invisible ', plain: true, iconCls: 'icon-stop '});},
 
If the displayed image is incomplete, set the auto-adjust height attribute of the row to true.
 
AutoRowHeight: true
 
 
 
10. Tree Control
 
Although easyui also has Tree controls, I prefer zTree, which is a free Jquery Tree control.
 
 
The reference code is as follows:
 
    <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>
 
The code for initializing the Tree control is as follows:
 
<Script type = "text/javascript"> <! -- Var setting = {data: {simpleData: {enable: true}, callback: {onClick: onClick, onDblClick: onDblClick} // reload the tree structure (asynchronous) function reloadTree () {$ ("# loading "). show (); $. getJSON ("/DictType/GetTreeJson? R = "+ Math. random (), function (json) {$. fn. zTree. init ($ ("# treeDemo"), setting, json); $. fn. zTree. getZTreeObj ("treeDemo "). expandAll (true); var treeObj = $. fn. zTree. getZTreeObj ("treeDemo"); var treeNodes = treeObj. getNodes (); if (treeNodes! = Null) {loadTypeData (treeNodes [0]. id) ;}}); $ ("# loading "). fadeOut (500);} // tree click function onClick (event, treeId, treeNode, clickFlag) {var id = treeNode. id; loadTypeData (id) ;}// double-click the node operation function onDblClick (event, treeId, treeNode) {var id = treeNode. id; loadTypeData (id); ShowDictType ('edit ');}
 
 
 
11. layout controls
 
EasyUI uses the DIV layer to control the display of the layout. The DIV adds a Region attribute to distinguish the Region where the layout belongs, for example, the interface layout of my Web development framework.
 
 
The interface code is as follows:
 
 
 
The code of the main workspace is as follows.
 
<! -- Main workspace --> <div id = "mainPanle"Region = "center"Title = "">
<Div class = "easyui-layout">
 
 
 
12. Pop-up dialog box
 
The EasyUI pop-up dialog box is often used. The interface code of the dialog box is placed in the DIV layer. It is usually initialized after the interface is loaded, but we only need to set appropriate layers according to similar conditions, the pop-up dialog box is formed. The pop-up dialog box has a mask effect.
 
 
The interface code is as follows:
 
 
 
 
13. Prompt information
 
In the general Web interface prompts, we usually use pure javascript alert functions to prompt information. If you are in the EasyUI-based interface layout and demonstration, obviously, this prompt does not match the interface demonstration. Therefore, we use the messager class to process the corresponding prompt information. The simple script prompts the following code.
 
$. Messager. alert ("prompt", "modified successfully ");
 
 
You can also add more information, such as icons, as shown in the following code.
 
    <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>
 
For general deletion operations, there is usually a message box prompting confirmation. This messager class is also encapsulated for processing, and the effect is good.
 
 
The interface code is as follows.
 
$. Messager. confirm ("confirm deletion", "Are you sure you want to delete the selected record? ", Function (deleteAction) {if (deleteAction) {$. get ("/DictData/DeletebyIds", postData, function (data) {if (data = "true") {$. messager. alert ("prompt", "successfully deleted selected records"); $ ("# grid "). datagrid ("reload"); // After the deletion is complete, remember the last information during the second deletion. This is not acceptable, so we need to clear the first rows information. length = ""; // The first method $ ("# grid "). datagrid ("clearSelections"); // method 2} else {$. messager. alert ("prompt", data );}});}});
 
The above are some interface controls that are commonly used in my Web development framework and their related code introduction. Some of the less commonly used controls may not be introduced in this article, you are welcome to add and discuss this article. We will continue to improve this article in the future as a good reference for the Framework Interface Based on ASp.net + EasyUI. I hope you will like it and give more comments.