Fatal编程技术网
  • javascript/
  • Javascript 有没有一种方式可以展示一个有吸引力的；“空状态”；使用Flexigrid的消息？

Javascript 有没有一种方式可以展示一个有吸引力的；“空状态”；使用Flexigrid的消息？

javascript

Javascript 有没有一种方式可以展示一个有吸引力的；“空状态”；使用Flexigrid的消息？,javascript,flexigrid,Javascript,Flexigrid,作为一名设计师，我是一个美丽的“空状态”消息概念的忠实粉丝，当没有数据可以显示时，这会鼓励用户采取行动。（事实上，有一个完整的tumblr博客致力于此：） 作为Flexigrid的一名快乐而忠诚的用户，我希望能够在我构建的系统没有任何搜索结果显示在网格中时（例如，“您没有未决的请求！单击新建开始”）替换一条空状态消息。理想情况下，这样的空状态消息将是图形化的，并且比单个行大，并将替换网格的全部内容。在没有返回行的情况下，是否有人可以提供一些建议，告诉我如何用图形化的空状态消息替换FlexGrid

作为一名设计师，我是一个美丽的“空状态”消息概念的忠实粉丝，当没有数据可以显示时，这会鼓励用户采取行动。（事实上，有一个完整的tumblr博客致力于此：）

作为Flexigrid的一名快乐而忠诚的用户，我希望能够在我构建的系统没有任何搜索结果显示在网格中时（例如，“您没有未决的请求！单击新建开始”）替换一条空状态消息。理想情况下，这样的空状态消息将是图形化的，并且比单个行大，并将替换网格的全部内容。在没有返回行的情况下，是否有人可以提供一些建议，告诉我如何用图形化的空状态消息替换FlexGrid的内容

谢谢



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Flexigrid</title>
    <link rel="stylesheet" type="text/css" href="../css/flexigrid.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="../js/flexigrid.js"></script>
    </head>
    <body>
    <p>This is a sample implementation attached to a form, to add additional parameters.</p>

    <form id="sform">
        <p>
        The values you entered will be place in name column for demo's sake.<br />
        Value 1 : <input type="text" name="val1" value="" autocomplete="off" /><br />
         Value 2 : Is a hidden input with value 3<input type="hidden" name="val2" value="3" /><br />
         Value 3 : 
         <select name="val3">
            <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="4">Four</option>
              <option value="5">Five</option>
         </select><br />
         Value 4 : <input type="checkbox" name="val4" id="val4" value="4" /><label for="val4">This will pass a value 4 if checked</label>
         </p>
         <p>
             <input type="submit" value="Submit" />
         </p>
    </form>
    <button onclick=hide()>HIDE</button>
    <button onclick=show()>SHOW</button>
    <table id="empty1" style="display:none">
    <tr><td><b>Please</b> <u>fill some</u> data</td></tr>
    </table>
    <table id="flex1" style="display:block">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    </table>
    <script type="text/javascript">
    var old = undefined
    function hide() {
        if (old == undefined) {
            old = flex1.innerHTML
            flex1.innerHTML = empty1.innerHTML
        }
    }
    function show() {
        if (old != undefined) {
            flex1.innerHTML = old
            old = undefined
        }
    }
    $("#flex1").flexigrid({
        url: 'post2.php',
        dataType: 'json',
        colModel : [
            {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
            {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
            {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
            {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
            {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
            ],
        searchitems : [
            {display: 'ISO', name : 'iso'},
            {display: 'Name', name : 'name', isdefault: true}
            ],
        sortname: "iso",
        sortorder: "asc",
        usepager: true,
        title: 'Countries',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 700,
        onSubmit: addFormData,
        height: 200
    });

    //This function adds paramaters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit           
    function addFormData(){
        //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
        var dt = $('#sform').serializeArray();
        $("#flex1").flexOptions({params: dt});
        return true;
    }

    $('#sform').submit(function (){
        $('#flex1').flexOptions({newp: 1}).flexReload();
        return false;
    });
    </script>
    </body>
    </html>


柔性网格
这是附加到表单的示例实现，用于添加其他参数


为演示起见，您输入的值将放在名称列中。

值1:

值2：是值为3的隐藏输入

价值3：
一个
两个
三
四
五


值4：如果选中，将传递值4





隐藏
显示
请填写一些数据
1.
2.
3.
var old=未定义
函数hide（）{
如果（旧==未定义）{
old=flex1.innerHTML
flex1.innerHTML=empty1.innerHTML
}
}
函数show（）{
如果（旧的！=未定义的）{
flex1.innerHTML=old
旧=未定义
}
}
$（“#flex1”）.flexigrid({
url:'post2.php'，
数据类型：“json”，
colModel：[
{display:'ISO'，name:'ISO'，width:40，sortable:true，align:'center'}，
{display:'Name'，Name:'Name'，width:180，sortable:true，align:'left'}，
{display:'Printable Name'，Name:'Printable_Name'，width:120，sortable:true，align:'left'}，
{display:'ISO3'，name:'ISO3'，width:130，sortable:true，align:'left'，hide:true}，
{显示：'Number Code'，名称：'numcode'，宽度：80，可排序：true，对齐：'right'}
],
搜索项目：[
{显示：'ISO'，名称：'ISO'}，
{display:'Name'，Name:'Name'，isdefault:true}
],
sortname:“iso”，
分拣员：“asc”，
是的，
标题：“国家”，
useRp：是的，
rp:15，
showTableToggleBtn：正确，
宽度：700，
onSubmit:addFormData，
身高：200
});
//此函数用于向flexigrid的立柱添加参数。如果不希望FlexGrid提交，也可以通过返回false来添加验证
函数addFormData（）{
//将表单对象传递给serializeArray将从所有对象获取有效数据，但是，如果传递非表单对象，则必须指定数据将来自的输入元素
var dt=$（'#sform'）.serializeArray（）；
$（“#flex1”）.flexOptions（{params:dt}）；
返回true；
}
$（'#sform'）。提交（函数（）{
$（'#flex1'）.flexOptions（{newp:1}）.flexReload（）；
返回false；
});
我使用dojo解决了这个问题，因为我们已经在我们的站点中使用了这个框架。我相信在不同的库中也有类似的解决方案。基本上，我创建了一个新类，在创建flexigrid后，该类会注意flexigrid中是否没有数据，如果指定了一个，则会将背景图像放入表中：

dojo.provide("app.components.EmptyStateFlexigrid");
dojo.require("dijit._Widget");

// Provides a custom Flexigrid with an empty-state
dojo.declare("app.components.EmptyStateFlexigrid", [dijit._Widget], {
    emptyStateUrl: null,
    id: null,
    url: null,
    colModel: null,
    buttons: null,
    sortField: null,
    sortOrder: null,
    height: null,
    usePager: null,
    resizable: null,

    // Create the flexigrid object
    makeGrid: function() {
        var gridObj = $('#' + this.id + "_flexigrid");
        gridObj.flexigrid({
            url: this.url,
            dataType : 'json',
            colModel : this.colModel,
            buttons : this.buttons,
            sortname : this.sortField,
            sortorder : this.sortOrder,
            height: this.height,
            usepager : this.usePager,
            resizable: this.resizable,
            onSuccess: this.checkEmptyState,
            useRp : true,
            rpOptions: [2, 10, 15, 20, 30, 50],
            rp : 15,
            showTableToggleBtn : false
        });
    }
},

// EMPTY-STATE: make a nice graphic here if there is no data
// Note that "this" is a flexigrid object
checkEmptyState: function() {
    var self = dijit.byId(this.id);
    var gridObj = $('#' + this.id + "_flexigrid");
    if (gridObj[0].id === this.id + '_flexigrid') {
        var gridChildren = gridObj.children();
        if (gridChildren.length === 0) {
            var gblocks = $(".gBlock");
            for (var i = 0; i < gblocks.length; i++) {
                var styleObj = gblocks[i].style;
                // The only way I could find to identify "our" flexigrid (if there is
                // more than one on the page) is to test to see if the height is the
                // same as our height. Kind of a lousy hack, but the best I could figure
                // out. -pbanka
                if (styleObj.height == self.height + 'px') {
                    styleObj.backgroundSize = "450px";
                    styleObj.backgroundRepeat = "no-repeat";
                    styleObj.backgroundImage = "url('" + self.emptyStateUrl + "')";
                }
            }
        }
    }
},

dojo.provide（“app.components.EmptyStateFlexigrid”）；
require（“dijit._小部件”）；
//提供具有空状态的自定义Flexigrid
declare（“app.components.EmptyStateFlexigrid”，[dijit.\u小部件]{
emptyStateUrl:null，
id:null，
url:null，
colModel:null，
按钮：空，
sortField:null，
排序器：空，
高度：空，
usePager:null，
可调整大小：空，
//创建FlexGrid对象
makeGrid:function（）{
var gridObj=$（“#”+this.id+“_flexigrid”）；
柔性网格({
url:this.url，
数据类型：“json”，
colModel:this.colModel，
按钮：这个按钮，
sortname:this.sortField，
巫师：这个，巫师，
高度：这个高度，
usepager:this.usepager，
可调整大小：此。可调整大小，
onSuccess:this.checkEmptyState，
useRp：是的，
r选项：[2,10,15,20,30,50]，
rp:15，
showTableToggleBtn:错误
});
}
},
//空状态：如果没有数据，在这里创建一个漂亮的图形
//请注意，“这”是一个flexigrid对象
checkEmptyState:函数（）{
var self=dijit.byId（this.id）；
var gridObj=$（“#”+this.id+“_flexigrid”）；
if（gridObj[0].id==this.id+'\u flexigrid'）{
var gridChildren=gridObj.children（）；
如果（gridChildren.length==0）{
var gblocks=$（“.gBlock”）；
对于（变量i=0；i