First:
Compared with the traditional sorting, this is a good attempt and I hope to inspire everyone.
You can refer to my previous blog: http://www.jb51.net/article/42087.htm
Html section:
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/>
<Link href = "css/create.css" rel = "stylesheet" type = "text/css"/>
<Script src = "js/jquery-1.7.2.min.js" type = "text/javascript"> </script>
<Script src = "js/jquery-ui.js" type = "text/javascript"> </script>
<Script src = "js/create. js" type = "text/javascript"> </script>
</Head>
<Body>
<Form>
<Ul>
<Li>
<Div id = "liuc" style = "display: block;">
<Div class = 'leftdiv 'style = "height: 60px"> metrics: </div>
<Div class = "eMain">
<Input style = "float: left;" type = "button" name = "insert" class = "selfpopup_button" onclick = "addevaluate () "value =" add "> <span class =" eInfo "> Note: you can drag to change the indicator sequence (excluding task start time and task end time indicators ). </Span>
<Div title = "Indicator 1" class = "eBody">
<Label class = "eNumber"> No.: 1 </label>
<Label style = "float: left"> metric Name: </label> <input class = "eName evaluate_name eject_input_text" name = "index_name_1" type = "text" value = "task Start Time"/>
<Label style = "float: left"> time limit: </label> <input class = "eLimit evaluate_limit eject_input_text" name = "index_limit_time_1" type = "text"/> <span class = "eMinute"> minutes </span>
<Label style = "float: left"> alert time: </label> <input class = "eAlert evaluate_alert eject_input_text" name = "index_alert_time_1" type = "text"/> <span class = "eMinute"> minutes </span>
</Div>
<Div action-type = "processdiv" id = "processdiv" name = "processdiv" style = "width: 800px;">
</Div>
<Div title = "Indicator 2" id = "lastevaluate" class = "eBody">
<Div class = "eNumber" id = "order"> No.: 2 </div>
<Label style = "float: left"> metric Name: </label> <input class = "eName evaluate_name eject_input_text" name = "index_name_2" type = "text" value = "task end time"/>
<Label style = "float: left"> time limit: </label> <input class = "eLimit evaluate_limit eject_input_text" name = "index_limit_time_2" type = "text"/> <span class = "eMinute"> minutes </span>
<Label style = "float: left"> alert time: </label> <input class = "eAlert evaluate_alert eject_input_text" name = "index_alert_time_2" type = "text"/> <span class = "eMinute"> minutes </span>
</Div>
</Div>
</Div>
</Li>
</Ul>
</Form>
</Body>
</Html>
JS section:
Copy codeThe Code is as follows:
// Add metrics
Function addevaluate (){
Var n = $ (". evaluate_name"). size ();
Var html = '';
Html = "<div title = '" + n + "'class = 'body' id = 'div _" + n + "'> <label class = 'number'> NO.: "+ n +" </label> <label style = 'float: left; '> metric Name: </label> <input class = 'ename evaluate_name eject_input_text 'name = 'index _ name _ "+ n +" 'Type = 'text'/> ";
Html + = "<label style = 'float: left; '> time limit: </label> <input class = 'elilmit evaluate_limit eject_input_text 'name = 'index _ limit_time _ "+ n +" 'Type = 'text'/> <span class = 'empte'> minute </span> ";
Html + = "<label style = 'float: left; '> alert time: </label> <input class = 'ealert evaluate_alert eject_input_text 'name = 'index _ alert_time _ "+ n +" 'Type = 'text'/> <span class = 'empte'> minute </span> ";
Html + = "<input type = 'button 'name = 'evaluatemove 'value =' remove 'onclick = 'evaluatemove (" + n + ") '/> </div> ";
$ ("Div [name = processdiv]"). append (html );
// Enables div to be dragged
$ ("Div [name = processdiv]"). sortable ({
Update: function (event, ui ){
Evaluaterefresh ();
}
});
// Sort metrics again
Evaluaterefresh ();
}
// Remove indicator
Function evaluatemove (n ){
$ ("# Div _" + n + ""). remove ();
Evaluaterefresh ();
}
// Remove the indicator and rename it
Function evaluaterefresh (){
Var count = $ ('. evaluate_name'). length-2;
For (var I = 0; I <count; I ++ ){
Var j = I + 2;
$ ('Div [name = "processdiv"] div: eq ('+ I +') input: eq (0 )'). attr ("name", "index_name _" + j );
$ ('Div [name = "processdiv"] div: eq ('+ I +') input: eq (1 )'). attr ("name", "index_limit_time _" + j );
$ ('Div [name = "processdiv"] div: eq ('+ I +') input: eq (2 )'). attr ("name", "index_alert_time _" + j );
$ ('Div [name = "processdiv"] div: eq ('+ I +') input: eq (3 )'). attr ("name", "index_description _" + j );
$ ('Div [name = "processdiv"] div: eq ('+ I +'). attr ("title", "indicator" + j );
$ ('Div [name = "processdiv"] div: eq ('+ I +') label: eq(0379'0000.html ("Sn:" + j );
}
// Set the serial number for the last indicator with a fixed name
Var lastcount;
If (count = 0 | count = '0 '){
Lastcount = 2;
} Else {
Lastcount = count + 2;
}
$ ('# Lastevaluate input: eq (0)'). attr ("name", "index_name _" + lastcount );
$ ('# Lastevaluate input: eq (1)'). attr ("name", "index_limit_time _" + lastcount );
$ ('# Lastevaluate input: eq (2)'). attr ("name", "index_alert_time _" + lastcount );
$ ('# Lastevaluate input: eq (3)'). attr ("name", "index_description _" + lastcount );
$ ('# Lastevaluate'). attr ("title", "indicator" + lastcount );
Certificate ('your order'your .html ('');
Certificate ('{order'}.html ("No.:" + lastcount );
}
// Save the Task Type and metric data to the database
Function evaluatesave (){
Evaluaterefresh ();
Var task_name = $ ("# sort_type"). val ();
Var task_remark = $ ("# sort_remark"). val ();
Var task_id = $ ("# task_id"). val ();
Var count = $ (". evaluate_name"). size ();
If (task_name.trim () = "" | task_name.trim () = null ){
JAlert ("Task Type name cannot be blank", "prompt ");
Return;
}
If (task_name.length> 10 ){
JAlert ("The Task Type can contain up to 10 words", "prompt ");
Return;
}
Var evaluate_name = new Array ();
Var evaluate_limit = new Array ();
Var evaluate_alert = new Array ();
Var evaluate_desc = new Array ();
For (var I = 1; I <= count; I ++ ){
Evaluate_name [I] = $ ("input [name = 'index _ name _" + I + "']"). val ();
If (evaluate_name [I]. trim () = "" | evaluate_name [I] = null ){
JAlert ("indicator name cannot be blank", "prompt ");
Return;
}
Evaluate_limit [I] = $ ("input [name = 'index _ limit_time _" + I + "']"). val ();
If (evaluate_limit [I]. trim () = "" | evaluate_limit [I] = null ){
JAlert ("indicator time limit cannot be blank", "prompt ");
Return;
} Else if (isNaN (evaluate_limit [I]. trim ())){
JAlert ("Metric Time limit must be all numbers", "prompt ");
Return;
}
Evaluate_alert [I] = $ ("input [name = 'index _ alert_time _" + I + "']"). val ();
If (evaluate_alert [I]. trim () = "" | evaluate_alert [I] = null ){
JAlert ("indicator warning time cannot be blank", "prompt ");
Return;
} Else if (isNaN (evaluate_alert [I]. trim ())){
JAlert ("indicator warning time must be all numbers", "prompt ");
Return;
}
Evaluate_desc [I] = $ ("input [name = 'index _ description _" + I + "']"). val ();
}
Var indexname = evaluate_name.join ('-');
Var indexlimit = evaluate_limit.join ('-');
Var indexalert = evaluate_alert.join ('-');
Var indexdesc = evaluate_desc.join ('-');
$. Ajax ({
Url: "/SortsManagement/exectute_evaluate_save ",
Type: "POST ",
Data :{
Task_icon: initializationData. filepath,
Task_name: task_name,
Task_id: task_id,
Task_remark: task_remark,
Count: count,
Indexname: indexname,
Indexlimit: indexlimit,
Indexalert: indexalert,
Indexdesc: indexdesc
},
DataType: "text ",
Success: function (result ){
If (result = 1 ){
Alert ("added successfully ");
Sorts_list ();
$. Selfalerts. _ hide ();
} Else {
Alert ("failed to add, please try again ");
Return false;
}
}
});
}
Css section:
Copy codeThe Code is as follows:
/* Each Metric */
. EBody {
Overflow: hidden;
Background: lightgray;
Width: 700px;
Margin-left: 55px;
Border-radius: 5px;
Margin-bottom: 10px;
}
. EMain {
Color: #001F69;
Float: left; font-family: ' ';
Font-style: inherit;
Font-weight: inherit;
Line-height: 2.2;
Margin-left: 10px;
Text-align: left;
Width: 550px;
}
/* Use the prompt */
. EInfo {
Color: red; font-size: 12px;
}
. ENumber {
Float: left;
Margin-left: 10px;
}
. EName {
Float: left; width: 150px
}
. ELimit,. eAlert {
Float: left; width: 50px; text-align: center;
}
. EMinute {
Float: left; margin-left: 3px;
}