Idea using easyUI’s DataGrid mouse over to display cell content is very simple

Time:2022-4-26

Idea using easyUI's DataGrid mouse over to display cell content is very simple

Header may be used

1. EasyUI table HTML file code
Focus on the formatter attribute inside

< table id = "findall" class = "easyUI DataGrid" title = "user data information" style = "width: Auto; height: Auto"
               data-options="singleSelect:true,toolbar:'#yuangong_toolbar',
                           striped:true,rownumbers:true,
                           pageList:[5,10,20],
                           pageSize:5,
                           fitColumns:true,pagination:true">
            <thead>
            <tr>
                < th field = "Sid" style = "width: 30px" formatter = "formatshow" > job number < / th >
                < th field = "sname" style = "width: 60px" formatter = "formatshow" > name < / th >
                < th field = "password" style = "width: 60px" formatter = "formatshow" > password < / th >
                < th field = "gender" style = "width: 40px" formatter = "formatshow" > gender < / th >
                < th field = "phone" style = "width: 100px" formatter = "formatshow" > phone number < / th >
                < th field = "email" style = "width: 100px" formatter = "formatshow" > email < / th >
<!--                < Th field = "address" style = "width: 220px" formatter = "formatshow" > address < / th > -- >
                < th field = "address" style = "width: 220px" formatter = "formatcelltooltip" > address test (another formatter function) < / th >
<!--                < Th data options = "field: 'address', width: 150, format: hoveringshow" > name < / th > -- >
            </tr>
            </thead>
        </table>

2. Insert formatter function

//Formatting cell tips
    function formatShow(val,row){
        if (val){
            return "<div class='easyui-panel easyui-tooltip' title='"+val+"' style='width:100px;padding:5px'>"+val+"</div>"
            // return "<span title='" + value + "'>" + value + "</span>";
        } else {
            return val;
        }
    }

3. The operation is the same, but the function name is different

//Formatting cell tips
                function formatCellTooltip(value,row){
                    if (value){
                        return "<div class='easyui-panel easyui-tooltip' title='"+value+"' style='width:100px;padding:5px'>"+value+"</div>";
                    }else
                    {
                        return  value;
                    }

                }

4. Idea may suggest that it is harmless
Idea using easyUI's DataGrid mouse over to display cell content is very simple
5. If you use the following function, garbled code will appear during Firefox browser initialization

    function formatShow(value){
	        return "<span title='" + value + "'>" + value + "</span>";
	    }

Recommended Today

JS generate guid method

JS generate guid method https://blog.csdn.net/Alive_tree/article/details/87942348 Globally unique identification(GUID) is an algorithm generatedBinaryCount Reg128 bitsNumber ofidentifier , GUID is mainly used in networks or systems with multiple nodes and computers. Ideally, any computational geometry computer cluster will not generate two identical guids, and the total number of guids is2^128In theory, it is difficult to make two […]