Langfang One middle evaluation: view the realization of mutual evaluation information and optimize display

"Preface"

In order to cultivate more people, the team leader recently prepared to transfer Langfang one to the next version of the staff, so that more people benefit from it, but before the handover, we need to improve the system according to the changes proposed in the last acceptance.

My main task is to improve the interface on the display, the basic task allocation is everyone to improve the module before, although there is no time to open the system, but still do it yourself, open after the feeling of kindness. In this perfect interface at the same time will own the implementation of the original to review once.

"Implementation"

Requirements: After the background manager has set up the mutual evaluation information, it needs to view the mutual evaluation information (support fuzzy query), and support the deletion.

The following is mainly about this part of the main function: View the realization of the mutual evaluation information and its effect

Talk not much, come to a picture:

Implementation method:

1. When the table is initialized, load the previous selected comment position and the position of the person being commented (JS method):

 Initialize table function inittable () {//To filter the data into the background by submitting the contents of the search box. $ (' #dg '). DataGrid ({url: '/querysetevaluation/queryby ',//title: ' Demo table use ', WI  DTH: "100%", striped:true,//row background Exchange fitcolumns:true, IDfield:                ' ID ', loadmsg: ' Loading user's information ... ', Pagination:true, Singleselect:false, Pagesize:10, Pagenumber:1, pagelist: [10, 20, 30],//Remove the DataGrid click Row The selected effect Onclickrow:function (RowIndex, RowData) {$ (this). DataGrid (' Unselectrow ', Rowinde                x); }, Queryparams: {searchname: $ ("#searchName"). Val ()}, CO Lumns: [[{field: ' ck ', checkbox:true, align: ' Left ', width:50}, {field : ' ID ', width:50, Hidden:true},{fieLD: ' Evaluator ', title: ' commented on person ', width:50, formatter:function (value, row, index) {return ' <a href= ' Javascrip    T:void (0); ' onclick= ' evalname (this) ' > ' + value + ' </a> '; }}, {field: ' Critics ', title: ' Post of person commented ', width:50, formatter:function (value, row, index) {return "<a href= ' javascript:void (0); '                            Onclick= ' Critisname (this) ' > ' + value + ' </a> '; }}, {field: ' Weight ', title: ' Weight ', width:50}, {F Ield: ' isused ', title: ' Is available ', width:50, hidden:true}, {field: ' Weightid ', title: ' Is available ', width        : (Hidden:true}]]}); }

2. Define the Popup box (JS method):

Displays the comment person name popup        function shownamefrm () {            $ ("#importDiv"). CSS ("Display", "block");            $ ("#importDiv"). Dialog ({                width:600,                height:250,                modal:true,                title: "Personnel Information",                collapsible:true ,                Minimizable:false,                maximizable:false,                resizable:true,            });        }

3. Control the displayed div and the textarea (HTML content) that is used to undertake the name of the person:

<div id= "Importdiv" style= "Display:none" >        <form method= "POST" enctype= "Multipart/form-data" >            <div style= "margin-bottom:20px; width:600px; height:250px ">                @*<span class=" Tip "><input type=" text "id=" II "style=" width:600px;height:250px; Border:none;word-break:break-all; " /></span><a class= "Btn-lit" ></a>*@                <span class= "Tip" >                    <textarea id= "EvaName "Style=" width:580px; height:250px; Border:none; Word-break:break-all; " ></textarea></span><a class= "Btn-lit" ></a>                            </div>            <div style= " margin-bottom:20px ">            </div>        </form>    </div>

4. Click the link to display the reviewer's name:

        Click the link to display the comment person name         function Evalname (obj) {                        //query your selected data.                      var id = obj.parentnode.parentnode.parentnode.children[1].innertext;            $.get ("/querysetevaluation/selectevaluatorname", {Evainfoid:id}, function (data) {                var name = data[0];                if (name = null) {                    name = name + ",";                    for (var i = 1; i < data.length; i++) {                        name + = Data[i] + ",";                    }                    Name = name.substring (0, name.length-1);                    Show people Information box                    shownamefrm ();                    document.getElementById ("Evaname"). Value = name;                }                else {                    $.messager.alert ("Hint:", "There are no people under this department!") ");                }                           });        }

"Optimize display"

Before the implementation of the way is to put it in the textare, in the acceptance of the time when the party said that it seems too messy, especially when the number of people! Adhering to the idea of serving the whole heart wholeheartedly, I optimize it!

Idea: Do not use textare to undertake but to undertake with table.

How to achieve that???

After analysis, two tasks need to be done:

1. Replace the textarea container with the name in the HTML of the interface with table. The code is implemented as follows:

    <!--used to display the name of the person under duty--    <div id= "Importdiv" style= "position:fixed;display:none;margin:0;width:220px; Border:1px;background-color: #a0c6e5 ">        <!--name table-->        <table border=" 0 "cellspacing=" 1 " Style= "Background-color: #a0c6e5" width= "280px" >            <tbody style= "font-size:20px" id= "tb1" >            </ tbody>         </table>    </div>

2. It is not difficult to see the JS method from the above click Link to display the reviewer's name , the loaded name is a data array , and the data array is placed in the table. The code is implemented as follows:

Click the link to display the comment person name function evalname (obj) {//query your selected data.            var id = obj.parentnode.parentnode.parentnode.children[1].innertext;                $.get ("/querysetevaluation/selectevaluatorname", {Evainfoid:id}, function (data) {var name = Data[0];                                       if (null! = name && ""! = name) {//Show people Information Box shownamefrm (); var col = 4;//Here is the table for generating 4 columns var lines = Math.ce                    Il (data.length/col);//A critical step, here is the number of rows generated for the table var str = "";                        for (var j = 0; J < lines; J + +) {//Traverse table row str + = "<tr>";                            for (var k = 0; k < col; k++) {//Traversal table column str + = "<td>";                            if (typeof Data[k + j * col] = = "undefined") {str + = " ";} else {str + data[k + J * col]+ "&NBSP; ";}                        str + = "</td>";                    };//table Line End str + = "</tr>";                    };                    var div1 = document.getElementById (' tb1 ');                                   div1.innerhtml = str; } else {$.messager.alert ("Hint:", "There are no people under this department!")                "); }                           });

The result of the final implementation is as follows:

"Summary"

Do a thing with your heart and find that you will do it better with your efforts, and thank each member of the team for their encouragement and support. In our joint efforts, our products are gradually improved. In the promotion of demand to explore and practice, I believe that the development of software on the road itself will go farther.

One of the first in Langfang is personally involved in one of the projects, although there are many twists and turns, but look at it like their own children, it witnessed the growth of our history, to tell the truth will it teach the next version of the staff really a little reluctant!

Finally with everyone to share a word: intentions to treat each product you have done.

Langfang One evaluation: To view the implementation of mutual evaluation information and optimize the display